up deps and improve login

README.md

@@ -2,7 +2,17 @@
 
 Simple tool to track your PI planet extractors. Login with your characters and enjoy the PI!
 
-Any questions, feedback or suggestions are welcome at [EVE PI Discord](https://discord.gg/bCdXzU8PHK)
+Any questions, feedback or suggestions are welcome at 
+[EVE PI Matrix](https://matrix.to/#/#eve-pi:calli.fi)
+[EVE PI Discord](https://discord.gg/bCdXzU8PHK)
+
+## Partner code
+
+Consider using EVE partner code to support the project:
+
+```
+CALLIEVE
+```
 
 ## [Hosted PI tool](https://pi.calli.fi)
 

package.json

@@ -26,7 +26,7 @@
     "crypto-js": "^4.1.1",
     "eslint": "8.42.0",
     "luxon": "^3.6.1",
-    "next": "^14.2.23",
+    "next": "14.2.35",
     "next-plausible": "^3.12.0",
     "pino": "^9.6.0",
     "pino-pretty": "^13.0.0",

src/app/components/Account/AccountCard.tsx

@@ -7,11 +7,14 @@ import { useContext, useState, useEffect } from "react";
 import { PlanRow } from "./PlanRow";
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd";
 import { planetCalculations } from "@/planets";
 import { EvePraisalResult } from "@/eve-praisal";
 import { STORAGE_IDS, PI_SCHEMATICS, PI_PRODUCT_VOLUMES, STORAGE_CAPACITIES } from "@/const";
 import { DateTime } from "luxon";
 import { PlanetCalculations, AlertState, StorageContent, StorageInfo } from "@/types/planet";
+import { getProgramOutputPrediction } from "../PlanetaryInteraction/ExtractionSimulation";
 
 interface AccountTotals {
   monthlyEstimate: number;
@@ -22,15 +25,17 @@ interface AccountTotals {
   totalExtractors: number;
 }
 
-const calculateAlertState = (planetDetails: PlanetCalculations): AlertState => {
+const calculateAlertState = (planetDetails: PlanetCalculations, minExtractionRate: number): AlertState => {
   const hasLowStorage = planetDetails.storageInfo.some(storage => storage.fillRate > 60);
   const hasLowImports = planetDetails.importDepletionTimes.some(depletion => depletion.hoursUntilDepletion < 24);
+  const hasLowExtractionRate = planetDetails.extractorAverages.length > 0 && minExtractionRate > 0 && planetDetails.extractorAverages.some(avg => avg.averagePerHour < minExtractionRate);
 
   return {
     expired: planetDetails.expired,
     hasLowStorage,
     hasLowImports,
-    hasLargeExtractorDifference: planetDetails.hasLargeExtractorDifference
+    hasLargeExtractorDifference: planetDetails.hasLargeExtractorDifference,
+    hasLowExtractionRate
   };
 };
 
@@ -47,14 +52,23 @@ const calculatePlanetDetails = (planet: PlanetWithInfo, piPrices: EvePraisalResu
   ]));
 
   // Calculate extractor averages and check for large differences
+  const CYCLE_TIME = 30 * 60; // 30 minutes in seconds
   const extractorAverages = extractors
     .filter(e => e.extractor_details?.product_type_id && e.extractor_details?.qty_per_cycle)
     .map(e => {
-      const cycleTime = e.extractor_details?.cycle_time || 3600;
+      const installDate = new Date(e.install_time ?? "");
+      const expiryDate = new Date(e.expiry_time ?? "");
+      const programDuration = (expiryDate.getTime() - installDate.getTime()) / 1000;
+      const cycles = Math.floor(programDuration / CYCLE_TIME);
+
       const qtyPerCycle = e.extractor_details?.qty_per_cycle || 0;
+      const prediction = getProgramOutputPrediction(qtyPerCycle, CYCLE_TIME, cycles);
+      const totalOutput = prediction.reduce((sum, val) => sum + val, 0);
+      const averagePerHour = totalOutput / cycles * 2;
+
       return {
         typeId: e.extractor_details!.product_type_id!,
-        averagePerHour: (qtyPerCycle * 3600) / cycleTime
+        averagePerHour
       };
     });
 
@@ -87,6 +101,7 @@ const calculatePlanetDetails = (planet: PlanetWithInfo, piPrices: EvePraisalResu
     const fillRate = storageCapacity > 0 ? (totalVolume / storageCapacity) * 100 : 0;
 
     return {
+      pin_id: storage.pin_id,
       type: storageType,
       type_id: storage.type_id,
       capacity: storageCapacity,
@@ -228,7 +243,70 @@ const calculateAccountTotals = (characters: AccessToken[], piPrices: EvePraisalR
 export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { characters: AccessToken[], isCollapsed?: boolean }) => {
   const theme = useTheme();
   const [localIsCollapsed, setLocalIsCollapsed] = useState(false);
-  const { planMode, piPrices, alertMode, balanceThreshold } = useContext(SessionContext);
+  const { planMode, piPrices, alertMode, balanceThreshold, minExtractionRate } = useContext(SessionContext);
+  const accountName = characters.length > 0 ? (characters[0].account ?? "-") : "-";
+  const [characterOrder, setCharacterOrder] = useState<number[]>(() => {
+    try {
+      const saved = localStorage.getItem(`characterOrder-${accountName}`);
+      if (saved) {
+        const parsed: number[] = JSON.parse(saved);
+        const ids = characters.map(c => c.character.characterId);
+        const valid = parsed.filter(id => ids.includes(id));
+        const newIds = ids.filter(id => !valid.includes(id));
+        return [...valid, ...newIds];
+      }
+    } catch (_) { /* ignore corrupt localStorage */ }
+    return characters.map(c => c.character.characterId);
+  });
+
+  useEffect(() => {
+    const ids = characters.map(c => c.character.characterId);
+    setCharacterOrder(prev => {
+      const valid = prev.filter(id => ids.includes(id));
+      const newIds = ids.filter(id => !valid.includes(id));
+      return [...valid, ...newIds];
+    });
+  }, [characters]);
+
+  useEffect(() => {
+    if (characterOrder.length > 0) {
+      localStorage.setItem(`characterOrder-${accountName}`, JSON.stringify(characterOrder));
+    }
+  }, [characterOrder, accountName]);
+
+  const [collapsedCharacters, setCollapsedCharacters] = useState<Set<number>>(() => {
+    try {
+      const saved = localStorage.getItem(`collapsedCharacters-${accountName}`);
+      if (saved) return new Set<number>(JSON.parse(saved));
+    } catch (_) { /* ignore corrupt localStorage */ }
+    return new Set<number>();
+  });
+
+  const toggleCharacterCollapsed = (characterId: number) => {
+    setCollapsedCharacters(prev => {
+      const next = new Set(prev);
+      if (next.has(characterId)) next.delete(characterId);
+      else next.add(characterId);
+      localStorage.setItem(`collapsedCharacters-${accountName}`, JSON.stringify(Array.from(next)));
+      return next;
+    });
+  };
+
+  const orderedCharacters = characterOrder
+    .map(id => characters.find(c => c.character.characterId === id))
+    .filter((c): c is AccessToken => c !== undefined);
+
+  const handleCharacterDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+    const items = Array.from(characterOrder);
+    const [moved] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, moved);
+    setCharacterOrder(items);
+  };
+
+  const DragDropContextComponent = DragDropContext as any;
+  const DroppableComponent = Droppable as any;
+  const DraggableComponent = Draggable as any;
   const { monthlyEstimate, storageValue, planetCount, characterCount, runningExtractors, totalExtractors } = calculateAccountTotals(characters, piPrices);
 
   // Calculate planet details and alert states for each planet
@@ -237,7 +315,7 @@ export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { char
       const details = calculatePlanetDetails(planet, piPrices, balanceThreshold);
       acc[`${character.character.characterId}-${planet.planet_id}`] = {
         ...details,
-        alertState: calculateAlertState(details)
+        alertState: calculateAlertState(details, minExtractionRate)
       };
     });
     return acc;
@@ -254,16 +332,18 @@ export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { char
     if (alertState.hasLowStorage) return 'visible';
     if (alertState.hasLowImports) return 'visible';
     if (alertState.hasLargeExtractorDifference) return 'visible';
+    if (alertState.hasLowExtractionRate) return 'visible';
     return 'hidden';
   };
 
   // Check if any planet in the account has alerts
   const hasAnyAlerts = Object.values(planetDetails).some(details => {
-    const alertState = calculateAlertState(details);
+    const alertState = calculateAlertState(details, minExtractionRate);
     return alertState.expired ||
            alertState.hasLowStorage ||
            alertState.hasLowImports ||
-           alertState.hasLargeExtractorDifference;
+           alertState.hasLargeExtractorDifference ||
+           alertState.hasLowExtractionRate;
   });
 
   // If in alert mode and no alerts, hide the entire card
@@ -406,30 +486,94 @@ export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { char
             {localIsCollapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </Box>
-        {!localIsCollapsed && characters.map((c) => (
-          <Stack
-            key={c.character.characterId}
-            direction="row"
-            alignItems="flex-start"
-          >
-            <CharacterRow character={c} />
-            {planMode ? (
-              <PlanRow character={c} />
-            ) : (
-              <PlanetaryInteractionRow 
-                character={c} 
-                planetDetails={c.planets.reduce((acc, planet) => {
-                  const details = planetDetails[`${c.character.characterId}-${planet.planet_id}`];
-                  acc[planet.planet_id] = {
-                    ...details,
-                    visibility: getAlertVisibility(details.alertState)
-                  };
-                  return acc;
-                }, {} as Record<number, PlanetCalculations & { visibility: string }>)}
-              />
-            )}
-          </Stack>
-        ))}
+        {!localIsCollapsed && (
+          <DragDropContextComponent onDragEnd={handleCharacterDragEnd}>
+            <DroppableComponent droppableId={`characters-${accountName}`} direction="vertical">
+              {(provided: any) => (
+                <Box ref={provided.innerRef} {...provided.droppableProps}>
+                  {orderedCharacters.map((c, index) => (
+                    <DraggableComponent
+                      key={c.character.characterId}
+                      draggableId={`char-${c.character.characterId}`}
+                      index={index}
+                    >
+                      {(provided: any, snapshot: any) => (
+                        <Stack
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          direction="row"
+                          alignItems="flex-start"
+                          sx={{
+                            opacity: snapshot.isDragging ? 0.8 : 1,
+                            backgroundColor: snapshot.isDragging ? theme.palette.action.hover : 'transparent',
+                            borderRadius: 1,
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              flexDirection: 'column',
+                              alignItems: 'center',
+                              pt: 1,
+                              gap: 0.5,
+                            }}
+                          >
+                            <Box
+                              {...provided.dragHandleProps}
+                              sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                cursor: 'grab',
+                                px: 0.5,
+                                color: theme.palette.text.disabled,
+                                '&:hover': { color: theme.palette.text.secondary },
+                                '&:active': { cursor: 'grabbing' },
+                              }}
+                            >
+                              ⠿
+                            </Box>
+                            <IconButton
+                              size="small"
+                              onClick={() => toggleCharacterCollapsed(c.character.characterId)}
+                              sx={{
+                                p: 0.25,
+                                color: theme.palette.text.disabled,
+                                '&:hover': { color: theme.palette.text.secondary },
+                                transform: collapsedCharacters.has(c.character.characterId) ? 'rotate(0deg)' : 'rotate(90deg)',
+                                transition: 'transform 0.2s ease-in-out',
+                              }}
+                            >
+                              <ChevronRightIcon fontSize="small" />
+                            </IconButton>
+                          </Box>
+                          <CharacterRow character={c} />
+                          {!collapsedCharacters.has(c.character.characterId) && (
+                            planMode ? (
+                              <PlanRow character={c} />
+                            ) : (
+                              <PlanetaryInteractionRow
+                                character={c}
+                                planetDetails={c.planets.reduce((acc, planet) => {
+                                  const details = planetDetails[`${c.character.characterId}-${planet.planet_id}`];
+                                  acc[planet.planet_id] = {
+                                    ...details,
+                                    visibility: getAlertVisibility(details.alertState)
+                                  };
+                                  return acc;
+                                }, {} as Record<number, PlanetCalculations & { visibility: string }>)}
+                              />
+                            )
+                          )}
+                        </Stack>
+                      )}
+                    </DraggableComponent>
+                  ))}
+                  {provided.placeholder}
+                </Box>
+              )}
+            </DroppableComponent>
+          </DragDropContextComponent>
+        )}
       </Box>
     </Paper>
   );

src/app/components/AppBar/AppBar.tsx

@@ -15,7 +15,9 @@ import { CCPButton } from "../CCP/CCPButton";
 import { DiscordButton } from "../Discord/DiscordButton";
 import { GitHubButton } from "../Github/GitHubButton";
 import { LoginButton } from "../Login/LoginButton";
+import { PartnerCodeButton } from "../PartnerCode/PartnerCodeButton";
 import { SettingsButton } from "../Settings/SettingsButtons";
+import { BuyMeCoffeeButton } from "../BuyMeCoffee/BuyMeCoffeeButton";
 import {
   Button,
   Dialog,
@@ -128,6 +130,12 @@ function ResponsiveAppBar() {
               <MenuItem onClick={handleCloseNavMenu}>
                 <CCPButton />
               </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <PartnerCodeButton />
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <BuyMeCoffeeButton />
+              </MenuItem>
             </Menu>
           </Box>
           <PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
@@ -168,6 +176,8 @@ function ResponsiveAppBar() {
               FAQ
             </Button>
             <CCPButton />
+            <PartnerCodeButton />
+            <BuyMeCoffeeButton />
           </Box>
         </Toolbar>
       </Container>

src/app/components/BuyMeCoffee/BuyMeCoffeeButton.tsx

@@ -0,0 +1,17 @@
+import { Box, Button, Tooltip } from "@mui/material";
+export const BuyMeCoffeeButton = () => {
+  return (
+    <Box>
+      <Tooltip title="Support the development of this tool">
+        <Button
+          href="https://buymeacoffee.com/evepi"
+          target="_blank"
+          style={{ width: "100%" }}
+          sx={{ color: "white", display: "block" }}
+        >
+          By me a beer
+        </Button>
+      </Tooltip>
+    </Box>
+  );
+};

src/app/components/Login/LoginDialog.tsx

@@ -19,7 +19,6 @@ export const LoginDialog = ({
     DEFAULT_SCOPES_TO_SELECT
   );
   const [ssoUrl, setSsoUrl] = useState<string | undefined>(undefined);
-  const [loginUrl, setLoginUrl] = useState<string | undefined>(undefined);
 
   const { EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL } =
     useContext(SessionContext);
@@ -30,15 +29,6 @@ export const LoginDialog = ({
     });
   }, []);
 
-  useEffect(() => {
-    if (!ssoUrl || selectedScopes.length === 0) return;
-    loginParameters(
-      selectedScopes,
-      EVE_SSO_CLIENT_ID,
-      EVE_SSO_CALLBACK_URL
-    ).then((res) => setLoginUrl(ssoUrl + "?" + res));
-  }, [selectedScopes, ssoUrl, EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL]);
-
   return (
     <Dialog open={open} onClose={closeDialog}>
       <DialogTitle>Select scopes to login with</DialogTitle>
@@ -59,8 +49,11 @@ export const LoginDialog = ({
       <DialogActions>
         <Button
           variant="contained"
+          disabled={!ssoUrl || selectedScopes.length === 0}
           onClick={() => {
-            window.open(loginUrl, "_self");
+            if (!ssoUrl) return;
+            const params = loginParameters(selectedScopes, EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL);
+            window.open(ssoUrl + "?" + params, "_self");
           }}
         >
           Login

src/app/components/PartnerCode/PartnerCodeButton.tsx

@@ -0,0 +1,32 @@
+import { Box, Button, Tooltip } from "@mui/material";
+import { useState } from "react";
+
+export const PartnerCodeButton = () => {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = () => {
+    navigator.clipboard.writeText("CALLIEVE");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Box>
+      <Tooltip
+        title={
+          copied
+            ? "Copied to clipboard!"
+            : "Click to copy partner code - Use for CCP purchases to support this project"
+        }
+      >
+        <Button
+          onClick={handleClick}
+          style={{ width: "100%" }}
+          sx={{ color: "white", display: "block" }}
+        >
+          Partner Code: CALLIEVE
+        </Button>
+      </Tooltip>
+    </Box>
+  );
+};

src/app/components/PlanetaryInteraction/ExtractionSimulationTooltip.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Box, Paper, Typography, Stack } from '@mui/material';
 import { Line } from 'react-chartjs-2';
 import { getProgramOutputPrediction } from './ExtractionSimulation';
 import { PI_TYPES_MAP } from '@/const';
+import { SessionContext } from '@/app/context/Context';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -41,6 +42,7 @@ interface ExtractionSimulationTooltipProps {
 export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipProps> = ({
   extractors
 }) => {
+  const { minExtractionRate } = useContext(SessionContext);
   const CYCLE_TIME = 30 * 60; // 30 minutes in seconds
 
   // Calculate program duration and cycles for each extractor
@@ -133,7 +135,7 @@ export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipPr
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Stack spacing={1}>
-            {extractorPrograms.map(({ typeId, cycleTime, cycles, installTime, expiryTime }, idx) => {
+            {extractorPrograms.map(({ typeId, cycleTime, cycles, expiryTime }, idx) => {
               const prediction = getProgramOutputPrediction(
                 extractors[idx].baseValue,
                 CYCLE_TIME,
@@ -159,8 +161,15 @@ export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipPr
                     <Typography variant="body2">
                       • Average per Cycle: {(totalOutput / cycles).toFixed(1)} units
                     </Typography>
-                    <Typography variant="body2">
-                      • Average per hour: {(totalOutput / cycles  * 2).toFixed(1)} units
+                    <Typography
+                      variant="body2"
+                      color={
+                        minExtractionRate > 0 && (extractors[idx].baseValue * 3600) / extractors[idx].cycleTime < minExtractionRate
+                          ? 'error'
+                          : 'inherit'
+                      }
+                    >
+                      • Average per hour: {(totalOutput / cycles * 2).toFixed(1)} units
                     </Typography>
                     <Typography variant="body2">
                       • Expires in: <Countdown overtime={true} date={DateTime.fromISO(expiryTime).toMillis()} />
@@ -176,7 +185,14 @@ export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipPr
                 </Typography>
                 <Stack spacing={0.5}>
                   {extractors.map((extractor, index) => {
-                    const averagePerHour = (extractor.baseValue * 3600) / extractor.cycleTime;
+                    const prediction = getProgramOutputPrediction(
+                      extractor.baseValue,
+                      CYCLE_TIME,
+                      extractorPrograms[index].cycles
+                    );
+                    const totalOutput = prediction.reduce((sum, val) => sum + val, 0);
+                    const cycles = extractorPrograms[index].cycles;
+                    const averagePerHour = totalOutput / cycles * 2;
                     return (
                       <Typography key={index} variant="body2">
                         • {PI_TYPES_MAP[extractor.typeId]?.name}: {averagePerHour.toFixed(1)} u/h
@@ -194,10 +210,27 @@ export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipPr
                       pt: 1
                     }}
                   >
-                    Difference: {Math.abs(
-                      (extractors[0].baseValue * 3600 / extractors[0].cycleTime) - 
-                      (extractors[1].baseValue * 3600 / extractors[1].cycleTime)
-                    ).toFixed(1)} u/h
+                    Difference: {(() => {
+                      const prediction0 = getProgramOutputPrediction(
+                        extractors[0].baseValue,
+                        CYCLE_TIME,
+                        extractorPrograms[0].cycles
+                      );
+                      const totalOutput0 = prediction0.reduce((sum, val) => sum + val, 0);
+                      const cycles0 = extractorPrograms[0].cycles;
+                      const avg0 = totalOutput0 / cycles0 * 2;
+
+                      const prediction1 = getProgramOutputPrediction(
+                        extractors[1].baseValue,
+                        CYCLE_TIME,
+                        extractorPrograms[1].cycles
+                      );
+                      const totalOutput1 = prediction1.reduce((sum, val) => sum + val, 0);
+                      const cycles1 = extractorPrograms[1].cycles;
+                      const avg1 = totalOutput1 / cycles1 * 2;
+
+                      return Math.abs(avg0 - avg1).toFixed(1);
+                    })()} u/h
                   </Typography>
                 </Stack>
               </Paper>

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -8,7 +8,7 @@ import { PlanetCalculations } from "@/types/planet";
 import React, { useContext } from "react";
 import { DateTime } from "luxon";
 import Countdown from "react-countdown";
-import { ColorContext } from "@/app/context/Context";
+import { ColorContext, SessionContext } from "@/app/context/Context";
 import { ExtractionSimulationTooltip } from "./ExtractionSimulationTooltip";
 import { timeColor } from "./alerts";
 
@@ -40,6 +40,7 @@ export const PlanetCard = ({
 }) => {
   const theme = useTheme();
   const { colors } = useContext(ColorContext);
+  const { minExtractionRate } = useContext(SessionContext);
 
   const extractorConfigs: ExtractorConfig[] = planetDetails.extractors
     .filter(e => e.extractor_details?.product_type_id && e.extractor_details?.qty_per_cycle)
@@ -51,6 +52,8 @@ export const PlanetCard = ({
       expiryTime: e.expiry_time ?? ""
     }));
 
+  const hasLowExtractionRate = planetDetails.extractorAverages.length > 0 && minExtractionRate > 0 && planetDetails.extractorAverages.some(avg => avg.averagePerHour < minExtractionRate);
+
   return (
     <Tooltip
       title={
@@ -114,9 +117,30 @@ export const PlanetCard = ({
           />
         )}
         <div style={{ position: "absolute", top: 5, left: 10 }}>
-          <Typography fontSize={theme.custom.smallText}>
+          <Typography
+            fontSize={theme.custom.smallText}
+            color={(planetDetails.hasLargeExtractorDifference || hasLowExtractionRate) ? 'error' : 'inherit'}
+          >
             {planet.infoUniverse?.name}
           </Typography>
+          {planetDetails.hasLargeExtractorDifference && (
+            <Typography
+              fontSize={theme.custom.smallText}
+              color="error"
+              sx={{ opacity: 0.7 }}
+            >
+              off-balance
+            </Typography>
+          )}
+          {hasLowExtractionRate && (
+            <Typography
+              fontSize={theme.custom.smallText}
+              color="error"
+              sx={{ opacity: 0.7 }}
+            >
+              low-extraction
+            </Typography>
+          )}
           {planetDetails.extractors.map((e, idx) => {
             const average = planetDetails.extractorAverages[idx];
             return (

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -55,7 +55,7 @@ export const PlanetTableRow = ({
   planetDetails: PlanetCalculations;
 }) => {
   const theme = useTheme();
-  const { showProductIcons, extractionTimeMode, alertMode } = useContext(SessionContext);
+  const { showProductIcons, extractionTimeMode, alertMode, minExtractionRate } = useContext(SessionContext);
   const { colors } = useContext(ColorContext);
 
   const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
@@ -103,11 +103,13 @@ export const PlanetTableRow = ({
   };
 
   // Check if there are any alerts
+  const hasLowExtractionRate = planetDetails.extractorAverages.length > 0 && minExtractionRate > 0 && planetDetails.extractorAverages.some(avg => avg.averagePerHour < minExtractionRate);
   const hasAlerts = alertMode && (
     planetDetails.expired ||
     planetDetails.storageInfo.some(storage => storage.fillRate > 60) ||
     planetDetails.importDepletionTimes.some(depletion => depletion.hoursUntilDepletion < 24) ||
-    planetDetails.hasLargeExtractorDifference
+    planetDetails.hasLargeExtractorDifference ||
+    hasLowExtractionRate
   );
 
   // If in alert mode and no alerts, hide the row
@@ -227,7 +229,7 @@ export const PlanetTableRow = ({
                 <Stack spacing={0}>
                   <Typography
                     fontSize={theme.custom.smallText}
-                    color={planetDetails.hasLargeExtractorDifference ? 'error' : 'inherit'}
+                    color={(planetDetails.hasLargeExtractorDifference || hasLowExtractionRate) ? 'error' : 'inherit'}
                   >
                     {planetInfoUniverse?.name}
                   </Typography>
@@ -240,6 +242,15 @@ export const PlanetTableRow = ({
                       off-balance
                     </Typography>
                   )}
+                  {hasLowExtractionRate && (
+                    <Typography
+                      fontSize={theme.custom.smallText}
+                      color="error"
+                      sx={{ opacity: 0.7 }}
+                    >
+                      low-extraction
+                    </Typography>
+                  )}
                 </Stack>
               </Tooltip>
             </div>
@@ -427,7 +438,7 @@ export const PlanetTableRow = ({
                       .map((storage, idx) => {
                         const fillRate = storage.fillRate;
                         const color = fillRate > 90 ? '#ff0000' : fillRate > 80 ? '#ffa500' : fillRate > 60 ? '#ffd700' : 'inherit';
-                        const contents = planet.info.pins.find(p => p.type_id === storage.type_id)?.contents || [];
+                        const contents = planet.info.pins.find(p => p.pin_id === storage.pin_id)?.contents || [];
                         
                         return (
                           <React.Fragment key={`storage-${character.character.characterId}-${planet.planet_id}-${storage.type}-${idx}`}>

src/app/components/Settings/SettingsButtons.tsx

@@ -21,7 +21,7 @@ import React, { useState, useContext } from "react";
 
 export const SettingsButton = () => {
   const { colors, setColors } = useContext(ColorContext);
-  const { balanceThreshold, setBalanceThreshold, showProductIcons, setShowProductIcons } = useContext(SessionContext);
+  const { balanceThreshold, setBalanceThreshold, minExtractionRate, setMinExtractionRate, showProductIcons, setShowProductIcons } = useContext(SessionContext);
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -51,6 +51,13 @@ export const SettingsButton = () => {
     setShowProductIcons(event.target.checked);
   };
 
+  const handleMinExtractionRateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value);
+    if (!isNaN(value) && value >= 0 && value <= 100000) {
+      setMinExtractionRate(value);
+    }
+  };
+
   return (
     <Tooltip title="Toggle settings dialog">
       <>
@@ -93,6 +100,19 @@ export const SettingsButton = () => {
                 error={balanceThreshold < 0 || balanceThreshold > 100000}
               />
             </Box>
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="subtitle1">Minimum Extraction Rate</Typography>
+              <TextField
+                type="number"
+                value={minExtractionRate}
+                onChange={handleMinExtractionRateChange}
+                fullWidth
+                margin="normal"
+                inputProps={{ min: 0, max: 100000 }}
+                helperText="Alert if extraction per hour is below this value (0-100,000, 0 = disabled)"
+                error={minExtractionRate < 0 || minExtractionRate > 100000}
+              />
+            </Box>
             {Object.keys(colors).map((key) => {
               return (
                 <div key={`color-row-${key}`}>

src/app/context/Context.tsx

@@ -39,6 +39,8 @@ export const SessionContext = createContext<{
   }) => PlanetConfig;
   balanceThreshold: number;
   setBalanceThreshold: Dispatch<SetStateAction<number>>;
+  minExtractionRate: number;
+  setMinExtractionRate: Dispatch<SetStateAction<number>>;
   showProductIcons: boolean;
   setShowProductIcons: (show: boolean) => void;
 }>({
@@ -68,6 +70,8 @@ export const SessionContext = createContext<{
   },
   balanceThreshold: 1000,
   setBalanceThreshold: () => {},
+  minExtractionRate: 0,
+  setMinExtractionRate: () => {},
   showProductIcons: false,
   setShowProductIcons: () => {},
 });

src/app/page.tsx

@@ -3,7 +3,7 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
-import { memo, useCallback, useEffect, useState, Suspense } from "react";
+import { memo, useCallback, useEffect, useRef, useState, Suspense } from "react";
 import { AccessToken, CharacterUpdate, Env, PlanetWithInfo } from "../types";
 import { MainGrid } from "./components/MainGrid";
 import { refreshToken } from "@/esi-sso";
@@ -18,6 +18,7 @@ import { useSearchParams } from "next/navigation";
 import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
 import { getPlanet, getPlanetUniverse, getPlanets } from "@/planets";
 import { PlanetConfig } from "@/types";
+import { saveCharacters as saveCharactersDB, loadCharacters } from "@/storage";
 
 // Add batch processing utility
 const processInBatches = async <T, R>(
@@ -36,6 +37,7 @@ const processInBatches = async <T, R>(
 
 const Home = () => {
   const searchParams = useSearchParams();
+  const callbackHandled = useRef(false);
   const [characters, setCharacters] = useState<AccessToken[]>([]);
   const [sessionReady, setSessionReady] = useState(false);
   const [environment, setEnvironment] = useState<Env | undefined>(undefined);
@@ -45,6 +47,7 @@ const Home = () => {
     undefined,
   );
   const [balanceThreshold, setBalanceThreshold] = useState(1000);
+  const [minExtractionRate, setMinExtractionRate] = useState(0);
   const [showProductIcons, setShowProductIcons] = useState(false);
   const [extractionTimeMode, setExtractionTimeMode] = useState(false);
 
@@ -91,7 +94,16 @@ const Home = () => {
     characters: AccessToken[],
   ): Promise<AccessToken[]> => {
     const code = searchParams?.get("code");
-    if (code) {
+    const returnedState = searchParams?.get("state");
+    if (code && !callbackHandled.current) {
+      callbackHandled.current = true;
+      const expectedState = localStorage.getItem("oauth_state");
+      localStorage.removeItem("oauth_state");
+      if (!expectedState || returnedState !== expectedState) {
+        console.error("OAuth state mismatch — possible CSRF attack");
+        window.history.replaceState(null, "", "/");
+        return Promise.resolve(characters);
+      }
       window.history.replaceState(null, "", "/");
       const res = await fetch(`api/token?code=${code}`);
       const newCharacter: AccessToken = await res.json();
@@ -108,13 +120,8 @@ const Home = () => {
     return Promise.resolve(characters);
   };
 
-  const initializeCharacters = useCallback((): AccessToken[] => {
-    const localStorageCharacters = localStorage.getItem("characters");
-    if (localStorageCharacters) {
-      const characterArray: AccessToken[] = JSON.parse(localStorageCharacters);
-      return characterArray.filter((c) => c.access_token && c.character);
-    }
-    return [];
+  const initializeCharacters = useCallback(async (): Promise<AccessToken[]> => {
+    return await loadCharacters();
   }, []);
 
   const initializeCharacterPlanets = (
@@ -139,9 +146,8 @@ const Home = () => {
       };
     });
 
-  const saveCharacters = (characters: AccessToken[]): AccessToken[] => {
-    localStorage.setItem("characters", JSON.stringify(characters));
-    return characters;
+  const saveCharacters = async (characters: AccessToken[]): Promise<AccessToken[]> => {
+    return await saveCharactersDB(characters);
   };
 
   const restoreCharacters = (characters: AccessToken[]) => {
@@ -279,8 +285,8 @@ const Home = () => {
 
   useEffect(() => {
     const ESI_CACHE_TIME_MS = 3000000;
-    const interval = setInterval(() => {
-      const characters = initializeCharacters();
+    const interval = setInterval(async () => {
+      const characters = await initializeCharacters();
       refreshSession(characters)
         .then(saveCharacters)
         .then(initializeCharacterPlanets)
@@ -310,6 +316,8 @@ const Home = () => {
         readPlanetConfig,
         balanceThreshold,
         setBalanceThreshold,
+        minExtractionRate,
+        setMinExtractionRate,
         showProductIcons,
         setShowProductIcons,
       }}

src/esi-sso.ts

@@ -37,17 +37,19 @@ export const revokeToken = async (
   });
 };
 
-export const loginParameters = async (
+export const loginParameters = (
   selectedScopes: string[],
   EVE_SSO_CLIENT_ID: string,
   EVE_SSO_CALLBACK_URL: string,
 ) => {
+  const state = crypto.randomUUID();
+  localStorage.setItem("oauth_state", state);
   return new URLSearchParams({
     response_type: "code",
     redirect_uri: EVE_SSO_CALLBACK_URL,
     client_id: EVE_SSO_CLIENT_ID,
     scope: selectedScopes.join(" "),
-    state: "asfe",
+    state,
   }).toString();
 };
 

src/pages/api/praisal.ts

@@ -9,8 +9,22 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     });
 
     try {
-      const praisalRequest: { quantity: number; type_id: number }[] = JSON.parse(
-        req.body
+      const parsed = JSON.parse(req.body);
+
+      if (!Array.isArray(parsed)) {
+        return res.status(400).json({ error: 'Invalid input' });
+      }
+
+      const praisalRequest: { quantity: number; type_id: number }[] = parsed.filter(
+        (item): item is { quantity: number; type_id: number } =>
+          item !== null &&
+          typeof item === 'object' &&
+          typeof item.quantity === 'number' &&
+          Number.isFinite(item.quantity) &&
+          item.quantity >= 0 &&
+          typeof item.type_id === 'number' &&
+          Number.isInteger(item.type_id) &&
+          item.type_id > 0
       );
 
       logger.info({
@@ -30,7 +44,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       logger.error({
         event: 'praisal_request_failed',
         error: e,
-        body: req.body
       });
       return res.status(500).json({ error: 'Failed to get praisal' });
     }

src/pages/api/token.ts

@@ -22,7 +22,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
     logger.info({
       event: 'token_request_start',
-      code: code
     });
 
     const params = new URLSearchParams({
@@ -92,7 +91,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         event: 'token_request_failed',
         reason: 'api_error',
         error: e,
-        code: code
       });
       return res.status(500).end();
     }

src/planets.ts

@@ -31,6 +31,7 @@ const CACHE_DURATION_MS = 60_000; // 1 minute
 const CACHE_STORAGE_KEY = "planet_cache";
 
 const loadCacheFromStorage = (): Map<string, CachedPlanetData> => {
+  if (typeof window === "undefined") return new Map();
   try {
     const stored = localStorage.getItem(CACHE_STORAGE_KEY);
     if (stored) {
@@ -44,6 +45,7 @@ const loadCacheFromStorage = (): Map<string, CachedPlanetData> => {
 };
 
 const saveCacheToStorage = (cache: Map<string, CachedPlanetData>) => {
+  if (typeof window === "undefined") return;
   try {
     const obj = Object.fromEntries(cache);
     localStorage.setItem(CACHE_STORAGE_KEY, JSON.stringify(obj));
@@ -62,11 +64,9 @@ export const getPlanet = async (
   const cached = planetCache.get(cacheKey);
 
   if (cached && Date.now() - cached.timestamp < CACHE_DURATION_MS) {
-    console.log(`[Cache HIT] Planet ${planet.planet_id} for character ${character.character.characterId}`);
     return cached.data;
   }
 
-  console.log(`[Cache MISS] Fetching planet ${planet.planet_id} for character ${character.character.characterId}`);
   const api = new Api();
   const planetInfo = (
     await api.v3.getCharactersCharacterIdPlanetsPlanetId(

src/storage.ts

@@ -0,0 +1,107 @@
+import { AccessToken } from "./types";
+
+const DB_NAME = "eve-pi-db";
+const DB_VERSION = 1;
+const STORE_NAME = "characters";
+
+// Initialize IndexedDB
+const initDB = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+  });
+};
+
+// Save characters to IndexedDB
+export const saveCharacters = async (
+  characters: AccessToken[]
+): Promise<AccessToken[]> => {
+  try {
+    const db = await initDB();
+    const transaction = db.transaction([STORE_NAME], "readwrite");
+    const store = transaction.objectStore(STORE_NAME);
+
+    store.put(characters, "characters");
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => {
+        db.close();
+        resolve(characters);
+      };
+      transaction.onerror = () => {
+        db.close();
+        reject(transaction.error);
+      };
+    });
+  } catch (error) {
+    console.error("Failed to save to IndexedDB:", error);
+    // Fallback: save minimal data to localStorage
+    try {
+      const minimalCharacters = characters.map((c) => ({
+        ...c,
+        planets: [], // Strip planet data to reduce size
+      }));
+      localStorage.setItem("characters", JSON.stringify(minimalCharacters));
+      console.warn("Saved minimal character data to localStorage fallback");
+    } catch (storageError) {
+      console.error("Failed to save to localStorage fallback:", storageError);
+    }
+    return characters;
+  }
+};
+
+// Load characters from IndexedDB
+export const loadCharacters = async (): Promise<AccessToken[]> => {
+  try {
+    const db = await initDB();
+    const transaction = db.transaction([STORE_NAME], "readonly");
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.get("characters");
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => {
+        db.close();
+        const characters = request.result as AccessToken[] | undefined;
+        if (characters && characters.length > 0) {
+          resolve(characters);
+        } else {
+          // Try localStorage migration
+          resolve(migrateFromLocalStorage());
+        }
+      };
+      request.onerror = () => {
+        db.close();
+        reject(request.error);
+      };
+    });
+  } catch (error) {
+    console.error("Failed to load from IndexedDB:", error);
+    // Fallback to localStorage
+    return migrateFromLocalStorage();
+  }
+};
+
+// Migrate data from localStorage to IndexedDB
+const migrateFromLocalStorage = (): AccessToken[] => {
+  try {
+    const localStorageCharacters = localStorage.getItem("characters");
+    if (localStorageCharacters) {
+      const characterArray: AccessToken[] = JSON.parse(localStorageCharacters);
+      const filtered = characterArray.filter((c) => c.access_token && c.character);
+      // Don't delete from localStorage yet - keep as backup
+      return filtered;
+    }
+  } catch (error) {
+    console.error("Failed to migrate from localStorage:", error);
+  }
+  return [];
+};

src/types/planet.ts

@@ -6,6 +6,7 @@ export interface StorageContent {
 }
 
 export interface StorageInfo {
+  pin_id: number;
   type: string;
   type_id: number;
   capacity: number;
@@ -32,6 +33,7 @@ export interface AlertState {
   hasLowStorage: boolean;
   hasLowImports: boolean;
   hasLargeExtractorDifference: boolean;
+  hasLowExtractionRate: boolean;
 }
 
 export interface ExtractorAverage {