cleanup the ui and fix nextjs upgrade issues

src/app/components/Backup/UploadDialog.tsx

@@ -43,7 +43,7 @@ export const UploadDialog = ({
 
       fileReader.readAsText(file);
     }
-  }, [file]);
+  }, [file, closeDialog, restoreCharacters, validate]);
 
   const changeHandler = (event: any) => {
     setFile(event.target.files[0]);

src/app/components/PlanetaryInteraction/ProductionChainVisualization.tsx

@@ -291,48 +291,12 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                             )}
                           </Box>
                         </Box>
-
-                        {inputs.length > 0 && (
-                          <>
-                            <Divider />
-                            <Typography variant="caption" color="text.secondary">
-                              Inputs per cycle:
-                            </Typography>
-                            <Stack spacing={0.5}>
-                              {inputs.map(input => (
-                                <Typography key={input.typeId} variant="caption" sx={{ pl: 2 }}>
-                                  • {PI_TYPES_MAP[input.typeId]?.name}: {input.quantity} units
-                                  {factoryCount > 0 && ` (${(input.quantity * factoryCount).toFixed(0)} total)`}
-                                </Typography>
-                              ))}
-                            </Stack>
-                          </>
-                        )}
-
-                        <Divider />
                         <Stack spacing={0.5}>
-                          {factoryCount > 0 && (
-                            <>
-                              <Typography variant="caption" color="text.secondary">
-                                Factories: {factoryCount}
-                              </Typography>
-                              {cycleTime && (
-                                <Typography variant="caption" color="text.secondary">
-                                  Cycles per hour: {(3600 / cycleTime).toFixed(1)}
-                                </Typography>
-                              )}
-                            </>
-                          )}
                           {production > 0 && (
                             <>
                               <Typography variant="caption" color="success.main">
                                 Production: {production.toFixed(1)} units total
                               </Typography>
-                              {factoryCount > 0 && (
-                                <Typography variant="caption" color="success.main">
-                                  ({(production / factoryCount).toFixed(1)} units/factory)
-                                </Typography>
-                              )}
                             </>
                           )}
                           {consumption > 0 && (
@@ -340,11 +304,6 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                               <Typography variant="caption" color="error.main">
                                 Consumption: {consumption.toFixed(1)} units total
                               </Typography>
-                              {factoryCount > 0 && (
-                                <Typography variant="caption" color="error.main">
-                                  ({(consumption / factoryCount).toFixed(1)} units/factory)
-                                </Typography>
-                              )}
                             </>
                           )}
                           {isImported && (
@@ -364,12 +323,6 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                             sx={{ fontWeight: 'bold' }}
                           >
                             Net: {(production - consumption).toFixed(1)} units total
-                            {factoryCount > 0 && (
-                              <>
-                                <br />
-                                ({((production - consumption) / factoryCount).toFixed(1)} units/factory)
-                              </>
-                            )}
                           </Typography>
                         </Stack>
                       </Paper>

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 } from "react";
+import { memo, useCallback, useEffect, useState, Suspense } from "react";
 import { AccessToken, CharacterUpdate, Env, PlanetWithInfo } from "../types";
 import { MainGrid } from "./components/MainGrid";
 import { refreshToken } from "@/esi-sso";
@@ -20,6 +20,7 @@ import { getPlanet, getPlanetUniverse, getPlanets } from "@/planets";
 import { PlanetConfig } from "./components/PlanetConfig/PlanetConfigDialog";
 
 const Home = () => {
+  const searchParams = useSearchParams();
   const [characters, setCharacters] = useState<AccessToken[]>([]);
   const [sessionReady, setSessionReady] = useState(false);
   const [environment, setEnvironment] = useState<Env | undefined>(undefined);
@@ -31,8 +32,6 @@ const Home = () => {
 
   const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
   const [alertMode, setAlertMode] = useState(false);
-  const searchParams = useSearchParams();
-  const code = searchParams && searchParams.get("code");
 
   const deleteCharacter = (character: AccessToken) => {
     const charactersToSave = characters.filter(
@@ -75,6 +74,7 @@ const Home = () => {
   const handleCallback = async (
     characters: AccessToken[],
   ): Promise<AccessToken[]> => {
+    const code = searchParams?.get("code");
     if (code) {
       window.history.replaceState(null, "", "/");
       const res = await fetch(`api/token?code=${code}`);
@@ -246,6 +246,7 @@ const Home = () => {
     }, ESI_CACHE_TIME_MS);
     return () => clearInterval(interval);
   });
+
   return (
     <SessionContext.Provider
       value={{
@@ -281,4 +282,11 @@ const Home = () => {
   );
 };
 
-export default memo(Home);
+const HomeWrapper = () => (
+  <Suspense>
+    <Home />
+  </Suspense>
+);
+HomeWrapper.displayName = 'HomeWrapper';
+
+export default memo(HomeWrapper);