increase automatic refresh to 5 minutes

rearrange character layout and align tables to character image
make account card clickable for easier collapse action
2026-02-12 02:38:48 +01:00 · 2025-04-23 18:59:34 +03:00 · 2025-04-23 18:52:05 +03:00 · 2025-04-23 17:59:50 +03:00 · 2025-04-23 17:41:09 +03:00 · 2025-04-23 15:23:57 +03:00
22 changed files with 1520 additions and 353 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@
 version: "2.1"
 services:
  eve-pi:
-    build: .
+    image: ghcr.io/calli-eve/eve-pi:latest
    container_name: eve-pi
    environment:
      - EVE_SSO_CLIENT_ID=${EVE_SSO_CLIENT_ID}
--- a/next.config.js
+++ b/next.config.js
@@ -43,11 +43,6 @@ module.exports = withSentryConfig(
    // Transpiles SDK to be compatible with IE11 (increases bundle size)
    transpileClientSDK: true,

-    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    tunnelRoute: "/monitoring",

    // Hides source maps from generated client bundles
    hideSourceMaps: true,
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@fontsource/roboto": "^5.0.3",
+        "@hello-pangea/dnd": "^18.0.1",
        "@mui/icons-material": "^5.11.16",
        "@mui/material": "^5.13.5",
        "@sentry/nextjs": "^8.2.1",
@@ -21,7 +22,7 @@
        "chart.js": "^4.4.7",
        "crypto-js": "^4.1.1",
        "eslint": "8.42.0",
-        "luxon": "^3.3.0",
+        "luxon": "^3.6.1",
        "next": "^14.2.23",
        "next-plausible": "^3.12.0",
        "react": "^18.3.1",
@@ -36,7 +37,7 @@
      },
      "devDependencies": {
        "@types/crypto-js": "^4.1.1",
-        "@types/luxon": "^3.3.0",
+        "@types/luxon": "^3.6.1",
        "@types/react-color": "^3.0.7",
        "@types/three": "^0.152.1",
        "eslint-config-next": "^14.2.23",
@@ -279,11 +280,12 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "license": "MIT",
      "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -534,6 +536,57 @@
      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz",
      "integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ=="
    },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/@types/react": {
+      "version": "19.1.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
+      "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -2463,10 +2516,11 @@
      "license": "MIT"
    },
    "node_modules/@types/luxon": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.0.tgz",
-      "integrity": "sha512-uKRI5QORDnrGFYgcdAVnHvEIvEZ8noTpP/Bg+HeUzZghwinDlIS87DEenV5r1YoOF9G4x600YsUXLWZ19rmTmg==",
-      "dev": true
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.6.1.tgz",
+      "integrity": "sha512-GEo4k1yY5PBaPLqEbk+vp2LhVCKPa/TQlTjuCf3exvx6fjB+jVuDa/Zopi8eznEkJf8yeZRzSK/kzG14g5aXPQ==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/@types/mysql": {
      "version": "2.15.26",
@@ -2604,6 +2658,12 @@
        "lil-gui": "~0.17.0"
      }
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@types/webxr": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz",
@@ -3711,6 +3771,15 @@
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
      "license": "MIT"
    },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -6391,9 +6460,10 @@
      }
    },
    "node_modules/luxon": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
-      "integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
+      "integrity": "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==",
+      "license": "MIT",
      "engines": {
        "node": ">=12"
      }
@@ -7323,6 +7393,12 @@
        }
      ]
    },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -7472,6 +7548,12 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -7496,9 +7578,10 @@
      }
    },
    "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
@@ -8668,6 +8751,12 @@
      "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
      "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinycolor2": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
@@ -8935,6 +9024,15 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9483,11 +9581,11 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
      "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
      }
    },
    "@babel/template": {
@@ -9683,6 +9781,39 @@
      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz",
      "integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ=="
    },
+    "@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "requires": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "19.1.2",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
+          "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "csstype": "^3.0.2"
+          }
+        },
+        "react-redux": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+          "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+          "requires": {
+            "@types/use-sync-external-store": "^0.0.6",
+            "use-sync-external-store": "^1.4.0"
+          }
+        }
+      }
+    },
    "@humanwhocodes/config-array": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -10834,9 +10965,9 @@
      "dev": true
    },
    "@types/luxon": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.0.tgz",
-      "integrity": "sha512-uKRI5QORDnrGFYgcdAVnHvEIvEZ8noTpP/Bg+HeUzZghwinDlIS87DEenV5r1YoOF9G4x600YsUXLWZ19rmTmg==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.6.1.tgz",
+      "integrity": "sha512-GEo4k1yY5PBaPLqEbk+vp2LhVCKPa/TQlTjuCf3exvx6fjB+jVuDa/Zopi8eznEkJf8yeZRzSK/kzG14g5aXPQ==",
      "dev": true
    },
    "@types/mysql": {
@@ -10970,6 +11101,11 @@
        "lil-gui": "~0.17.0"
      }
    },
+    "@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
    "@types/webxr": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz",
@@ -11740,6 +11876,14 @@
      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
    },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
    "csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -13546,9 +13690,9 @@
      }
    },
    "luxon": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
-      "integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg=="
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
+      "integrity": "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ=="
    },
    "magic-string": {
      "version": "0.30.17",
@@ -14130,6 +14274,11 @@
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
    },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14244,6 +14393,11 @@
        "picomatch": "^2.2.1"
      }
    },
+    "redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
    "reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -14261,9 +14415,9 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
    "regexp.prototype.flags": {
      "version": "1.5.4",
@@ -15028,6 +15182,11 @@
      "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
      "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
    },
+    "tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
    "tinycolor2": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
@@ -15201,6 +15360,12 @@
        "punycode": "^2.1.0"
      }
    },
+    "use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "requires": {}
+    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.3",
+    "@hello-pangea/dnd": "^18.0.1",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.5",
    "@sentry/nextjs": "^8.2.1",
@@ -23,7 +24,7 @@
    "chart.js": "^4.4.7",
    "crypto-js": "^4.1.1",
    "eslint": "8.42.0",
-    "luxon": "^3.3.0",
+    "luxon": "^3.6.1",
    "next": "^14.2.23",
    "next-plausible": "^3.12.0",
    "react": "^18.3.1",
@@ -38,7 +39,7 @@
  },
  "devDependencies": {
    "@types/crypto-js": "^4.1.1",
-    "@types/luxon": "^3.3.0",
+    "@types/luxon": "^3.6.1",
    "@types/react-color": "^3.0.7",
    "@types/three": "^0.152.1",
    "eslint-config-next": "^14.2.23",
--- a/src/app/components/Account/AccountCard.tsx
+++ b/src/app/components/Account/AccountCard.tsx
@@ -1,40 +1,231 @@
 import { AccessToken } from "@/types";
-import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme, Paper, IconButton, Divider } from "@mui/material";
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
 import { SessionContext } from "@/app/context/Context";
-import { useContext } from "react";
+import { useContext, useState, useEffect } from "react";
 import { PlanRow } from "./PlanRow";
-export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
-  const theme = useTheme();
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { planetCalculations } from "@/planets";
+import { EvePraisalResult } from "@/eve-praisal";
+import { STORAGE_IDS } from "@/const";
+
+interface AccountTotals {
+  monthlyEstimate: number;
+  storageValue: number;
+  planetCount: number;
+  characterCount: number;
+  runningExtractors: number;
+  totalExtractors: number;
+}
+
+const calculateAccountTotals = (characters: AccessToken[], piPrices: EvePraisalResult | undefined): AccountTotals => {
+  let totalMonthlyEstimate = 0;
+  let totalStorageValue = 0;
+  let totalPlanetCount = 0;
+  let totalCharacterCount = characters.length;
+  let runningExtractors = 0;
+  let totalExtractors = 0;
+
+  characters.forEach((character) => {
+    totalPlanetCount += character.planets.length;
+    character.planets.forEach((planet) => {
+      const { localExports, extractors } = planetCalculations(planet);
+      const planetConfig = character.planetConfig.find(p => p.planetId === planet.planet_id);
+      
+      // Count running and total extractors
+      if (!planetConfig?.excludeFromTotals) {
+        extractors.forEach(extractor => {
+          totalExtractors++;
+          if (extractor.expiry_time && new Date(extractor.expiry_time) > new Date()) {
+            runningExtractors++;
+          }
+        });
+      }
+      
+      // Calculate monthly estimate
+      if (!planetConfig?.excludeFromTotals) {
+        localExports.forEach((exportItem) => {
+          const valueInMillions = (((piPrices?.appraisal.items.find(
+            (a) => a.typeID === exportItem.typeId,
+          )?.prices.sell.min ?? 0) *
+            exportItem.amount) /
+            1000000) *
+            24 *
+            30;
+          totalMonthlyEstimate += valueInMillions;
+        });
+      }
+
+      if (!planetConfig?.excludeFromTotals) {
+        planet.info.pins
+          .filter(pin => STORAGE_IDS().some(storage => storage.type_id === pin.type_id))
+          .forEach(storage => {
+            storage.contents?.forEach(content => {
+              const valueInMillions = (piPrices?.appraisal.items.find(
+                (a) => a.typeID === content.type_id,
+              )?.prices.sell.min ?? 0) * content.amount / 1000000;
+              totalStorageValue += valueInMillions;
+            });
+          });
+      }
+    });
+  });
+
+  return {
+    monthlyEstimate: totalMonthlyEstimate,
+    storageValue: totalStorageValue,
+    planetCount: totalPlanetCount,
+    characterCount: totalCharacterCount,
+    runningExtractors,
+    totalExtractors
+  };
+};
+
+export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { characters: AccessToken[], isCollapsed?: boolean }) => {
+  const theme = useTheme();
+  const [localIsCollapsed, setLocalIsCollapsed] = useState(false);
+  const { planMode, piPrices } = useContext(SessionContext);
+  const { monthlyEstimate, storageValue, planetCount, characterCount, runningExtractors, totalExtractors } = calculateAccountTotals(characters, piPrices);
+
+  // Update local collapse state when prop changes
+  useEffect(() => {
+    setLocalIsCollapsed(propIsCollapsed ?? false);
+  }, [propIsCollapsed]);

-  const { planMode } = useContext(SessionContext);
  return (
-    <Box
+    <Paper
+      elevation={2}
      sx={{
-        padding: 1,
-        borderBottom: theme.custom.compactMode ? "" : "solid 1px gray",
+        padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
+        margin: theme.spacing(1),
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 1,
+        backgroundColor: theme.palette.background.paper,
+        transition: 'all 0.2s ease-in-out',
+        cursor: 'grab',
+        '&:hover': {
+          boxShadow: theme.shadows[4],
+        },
+        '&:active': {
+          boxShadow: theme.shadows[8],
+          cursor: 'grabbing',
+        },
      }}
    >
-      <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>
-        {characters[0].account !== "-"
-          ? `Account: ${characters[0].account}`
-          : "No account name"}
-      </Typography>
-      {characters.map((c) => (
-        <Stack
-          key={c.character.characterId}
-          direction="row"
-          alignItems="flex-start"
+      <Box sx={{ flex: 1 }}>
+        <Box
+          sx={{
+            backgroundColor: theme.palette.background.default,
+            borderRadius: 1,
+            padding: theme.spacing(1),
+            marginBottom: theme.spacing(2),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+          }}
+          onClick={() => setLocalIsCollapsed(!localIsCollapsed)}
        >
-          <CharacterRow character={c} />
-          {planMode ? (
-            <PlanRow character={c} />
-          ) : (
-            <PlanetaryInteractionRow character={c} />
-          )}
-        </Stack>
-      ))}
-    </Box>
+          <Box>
+            <Typography 
+              sx={{ 
+                fontSize: "0.9rem",
+                fontWeight: 500,
+                color: theme.palette.text.primary,
+              }}
+            >
+              {characters.length > 0 && characters[0].account !== "-"
+                ? `Account: ${characters[0].account}`
+                : "No account name"}
+            </Typography>
+            <Box sx={{ 
+              display: 'flex', 
+              gap: 2,
+              flexWrap: 'wrap',
+              mt: 1,
+              alignItems: 'center'
+            }}>
+              <Typography 
+                sx={{ 
+                  fontSize: "0.8rem",
+                  color: theme.palette.text.secondary,
+                }}
+              >
+                Monthly: {monthlyEstimate >= 1000 
+                  ? `${(monthlyEstimate / 1000).toFixed(2)} B` 
+                  : `${monthlyEstimate.toFixed(2)} M`} ISK
+              </Typography>
+              <Divider orientation="vertical" flexItem sx={{ height: 16, borderColor: theme.palette.divider }} />
+              <Typography 
+                sx={{ 
+                  fontSize: "0.8rem",
+                  color: theme.palette.text.secondary,
+                }}
+              >
+                Storage: {storageValue >= 1000 
+                  ? `${(storageValue / 1000).toFixed(2)} B` 
+                  : `${storageValue.toFixed(2)} M`} ISK
+              </Typography>
+              <Divider orientation="vertical" flexItem sx={{ height: 16, borderColor: theme.palette.divider }} />
+              <Typography 
+                sx={{ 
+                  fontSize: "0.8rem",
+                  color: theme.palette.text.secondary,
+                }}
+              >
+                Planets: {planetCount}
+              </Typography>
+              <Divider orientation="vertical" flexItem sx={{ height: 16, borderColor: theme.palette.divider }} />
+              <Typography 
+                sx={{ 
+                  fontSize: "0.8rem",
+                  color: theme.palette.text.secondary,
+                }}
+              >
+                Characters: {characterCount}
+              </Typography>
+              <Divider orientation="vertical" flexItem sx={{ height: 16, borderColor: theme.palette.divider }} />
+              <Typography 
+                sx={{ 
+                  fontSize: "0.8rem",
+                  color: runningExtractors < totalExtractors ? theme.palette.error.main : theme.palette.text.secondary,
+                }}
+              >
+                Extractors: {runningExtractors}/{totalExtractors}
+              </Typography>
+            </Box>
+          </Box>
+          <IconButton 
+            size="small" 
+            sx={{ 
+              transform: localIsCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s ease-in-out'
+            }}
+          >
+            {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} />
+            )}
+          </Stack>
+        ))}
+      </Box>
+    </Paper>
  );
 };
--- a/src/app/components/Characters/CharacterDialog.tsx
+++ b/src/app/components/Characters/CharacterDialog.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogTitle, Box } from "@mui/material";
 import { AccessToken, CharacterUpdate } from "../../../types";
 import { useEffect, useState, KeyboardEvent } from "react";
 import TextField from "@mui/material/TextField";
@@ -34,7 +34,9 @@ export const CharacterDialog = ({
  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Enter") {
      closeDialog();
-      character && updateCharacter(character, { account, comment });
+      if (character) {
+        updateCharacter(character, { account, comment });
+      }
    }
  };

@@ -44,16 +46,27 @@ export const CharacterDialog = ({
      onClose={closeDialog}
      fullWidth={true}
    >
-      <DialogTitle>{character && character.character.name}</DialogTitle>
-      <TextField
-        id="outlined-basic"
-        label="Account name"
-        variant="outlined"
-        value={account ?? ""}
-        sx={{ margin: 1 }}
-        onChange={(event) => setAccount(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
+      <DialogTitle>{character?.character?.name}</DialogTitle>
+      <Box sx={{ display: 'flex', alignItems: 'center', margin: 1 }}>
+        <TextField
+          id="outlined-basic"
+          label="Account name"
+          variant="outlined"
+          value={account ?? ""}
+          sx={{ flex: 1 }}
+          onChange={(event) => setAccount(event.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          onClick={() => {
+            setAccount("-");
+          }}
+          variant="outlined"
+          sx={{ ml: 1 }}
+        >
+          Clear account
+        </Button>
+      </Box>
      <TextField
        id="outlined-basic"
        label="System"
@@ -77,6 +90,7 @@ export const CharacterDialog = ({
      <DialogActions>
        <Button
          onClick={() => {
+            console.log("Saving character", character, { account, comment, system });
            character &&
              updateCharacter(character, { account, comment, system });
            closeDialog();
--- a/src/app/components/Characters/CharacterRow.tsx
+++ b/src/app/components/Characters/CharacterRow.tsx
@@ -7,16 +7,18 @@ import { styled, useTheme } from "@mui/material/styles";
 import React from "react";
 import { CharacterDialog } from "./CharacterDialog";
 import { AccessToken } from "@/types";
-import { Box, Button, Tooltip } from "@mui/material";
+import { Box, Tooltip, IconButton, Typography } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { EVE_IMAGE_URL } from "@/const";
 import { CharacterContext } from "@/app/context/Context";

 const StackItem = styled(Stack)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
+  display: "flex",
  textAlign: "left",
-  justifyContent: "center",
-  alignItems: "center",
+  justifyContent: "flex-start",
+  alignItems: "flex-start",
 }));

 export const CharacterRow = ({ character }: { character: AccessToken }) => {
@@ -29,8 +31,6 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
  return (
    <StackItem
      key={character.character.characterId}
-      alignItems="flex-start"
-      justifyContent="flex-start"
    >
      <CharacterDialog
        character={selectedCharacter}
@@ -38,13 +38,49 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
        updateCharacter={updateCharacter}
        closeDialog={() => setSelectedCharacter(undefined)}
      />
+      <Typography
+        sx={{
+          whiteSpace: "nowrap",
+          fontSize: theme.custom.smallText,
+          textAlign: "left",
+          lineHeight: 1.2,
+          marginBottom: "0.4rem",
+          marginLeft: "0.2rem",
+          overflow: "visible",
+          textOverflow: "clip",
+          width: "1rem"
+        }}
+      >
+        {character.character.name}
+      </Typography>
      <Tooltip title={character.comment}>
        <Box
          display="flex"
          flexDirection="column"
          maxWidth={120}
          onClick={() => setSelectedCharacter(character)}
+          position="relative"
+          sx={{ cursor: "pointer" }}
        >
+          <IconButton
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedCharacter(character);
+            }}
+            sx={{
+              p: 0,
+              position: "absolute",
+              top: 4,
+              left: 4,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+            }}
+          >
+            <SettingsIcon fontSize="small" sx={{ color: "white" }} />
+          </IconButton>
          <Image
            unoptimized
            src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
@@ -53,16 +89,6 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
            height={theme.custom.cardImageSize}
            style={{ marginBottom: "0.2rem", borderRadius: 8 }}
          />
-          <Button
-            style={{
-              padding: 6,
-              fontSize: theme.custom.smallText,
-              lineHeight: 1,
-            }}
-            variant="outlined"
-          >
-            {character.character.name}
-          </Button>
        </Box>
      </Tooltip>
    </StackItem>
--- a/src/app/components/MainGrid.tsx
+++ b/src/app/components/MainGrid.tsx
@@ -5,12 +5,16 @@ import {
  Grid,
  ThemeProvider,
  createTheme,
+  Button,
 } from "@mui/material";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
 import { Summary } from "./Summary/Summary";
+import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

 interface Grouped {
  [key: string]: AccessToken[];
@@ -38,7 +42,42 @@ declare module "@mui/material/styles" {
 }

 export const MainGrid = () => {
-  const { characters } = useContext(CharacterContext);
+  const { characters, updateCharacter } = useContext(CharacterContext);
+  const [accountOrder, setAccountOrder] = useState<string[]>([]);
+  const [allCollapsed, setAllCollapsed] = useState(false);
+
+  // Initialize account order when characters change
+  useEffect(() => {
+    const currentAccounts = Object.keys(
+      characters.reduce<Grouped>((group, character) => {
+        const { account } = character;
+        group[account ?? ""] = group[account ?? ""] ?? [];
+        group[account ?? ""].push(character);
+        return group;
+      }, {})
+    );
+
+    const savedOrder = localStorage.getItem('accountOrder');
+    if (savedOrder) {
+      try {
+        const parsedOrder = JSON.parse(savedOrder);
+        const validOrder = parsedOrder.filter((account: string) => currentAccounts.includes(account));
+        const newAccounts = currentAccounts.filter(account => !validOrder.includes(account));
+        setAccountOrder([...validOrder, ...newAccounts]);
+      } catch (e) {
+        setAccountOrder(currentAccounts);
+      }
+    } else {
+      setAccountOrder(currentAccounts);
+    }
+  }, [characters]);
+
+  useEffect(() => {
+    if (accountOrder.length > 0) {
+      localStorage.setItem('accountOrder', JSON.stringify(accountOrder));
+    }
+  }, [accountOrder]);
+
  const groupByAccount = characters.reduce<Grouped>((group, character) => {
    const { account } = character;
    group[account ?? ""] = group[account ?? ""] ?? [];
@@ -79,24 +118,80 @@ export const MainGrid = () => {
    );
  }, [compactMode]);

+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const items = Array.from(accountOrder);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    setAccountOrder(items);
+  };
+
+  const DragDropContextComponent = DragDropContext as any;
+  const DroppableComponent = Droppable as any;
+  const DraggableComponent = Draggable as any;
+
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Box sx={{ flexGrow: 1 }}>
        <ResponsiveAppBar />
        {compactMode ? <></> : <Summary characters={characters} />}
-        <Grid container spacing={1}>
-          {Object.values(groupByAccount).map((g, id) => (
-            <Grid
-              item
-              xs={12}
-              sm={compactMode ? 6 : 12}
-              key={`account-${id}-${g[0].account}`}
-            >
-              <AccountCard characters={g} />
-            </Grid>
-          ))}
-        </Grid>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start', padding: 1 }}>
+          <Button
+            startIcon={allCollapsed ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
+            onClick={() => setAllCollapsed(!allCollapsed)}
+            size="small"
+          >
+            {allCollapsed ? 'Expand All' : 'Collapse All'}
+          </Button>
+        </Box>
+        <DragDropContextComponent onDragEnd={handleDragEnd}>
+          <DroppableComponent droppableId="accounts">
+            {(provided: any) => (
+              <Grid
+                container
+                spacing={1}
+                sx={{ padding: 1 }}
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                {accountOrder.map((account, index) => (
+                  <DraggableComponent
+                    key={account}
+                    draggableId={account}
+                    index={index}
+                  >
+                    {(provided: any) => (
+                      <Grid
+                        item
+                        xs={12}
+                        sm={compactMode ? 6 : 12}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        sx={{
+                          '& > *': {
+                            width: '100%',
+                          },
+                        }}
+                      >
+                        {groupByAccount[account] && groupByAccount[account].length > 0 && (
+                          <AccountCard 
+                            characters={groupByAccount[account]} 
+                            isCollapsed={allCollapsed}
+                          />
+                        )}
+                      </Grid>
+                    )}
+                  </DraggableComponent>
+                ))}
+                {provided.placeholder}
+              </Grid>
+            )}
+          </DroppableComponent>
+        </DragDropContextComponent>
      </Box>
    </ThemeProvider>
  );
--- a/src/app/components/PlanetConfig/PlanetConfigDialog.tsx
+++ b/src/app/components/PlanetConfig/PlanetConfigDialog.tsx
@@ -3,8 +3,6 @@ import { planetCalculations } from "@/planets";
 import { AccessToken, PlanetWithInfo } from "@/types";
 import {
  Card,
-  Checkbox,
-  FormControlLabel,
  Table,
  TableBody,
  TableCell,
@@ -20,12 +18,6 @@ import Image from "next/image";
 import { ColorContext, SessionContext } from "@/app/context/Context";
 import { useContext } from "react";

-export type PlanetConfig = {
-  characterId: number;
-  planetId: number;
-  excludeFromTotals: boolean;
-};
-
 export const PlanetConfigDialog = ({
  planet,
  character,
@@ -35,14 +27,9 @@ export const PlanetConfigDialog = ({
 }) => {
  const theme = useTheme();
  const { colors } = useContext(ColorContext);
-  const { piPrices, readPlanetConfig, updatePlanetConfig } =
-    useContext(SessionContext);
+  const { piPrices } = useContext(SessionContext);
  const { extractors, localProduction, localImports, localExports } =
    planetCalculations(planet);
-  const planetConfig = readPlanetConfig({
-    characterId: character.character.characterId,
-    planetId: planet.planet_id,
-  });

  return (
    <Card style={{ padding: "1rem", margin: "1rem" }}>
@@ -189,23 +176,6 @@ export const PlanetConfigDialog = ({
          </TableRow>
        </TableBody>
      </Table>
-      <Card style={{ marginTop: "1rem" }}>
-        <Typography>Planet configuration</Typography>
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={planetConfig.excludeFromTotals}
-              onChange={() =>
-                updatePlanetConfig({
-                  ...planetConfig,
-                  excludeFromTotals: !planetConfig.excludeFromTotals,
-                })
-              }
-            />
-          }
-          label="Consumed by production chain"
-        />
-      </Card>
    </Card>
  );
 };
--- a/src/app/components/PlanetaryInteraction/ExtractionSimulation.ts
+++ b/src/app/components/PlanetaryInteraction/ExtractionSimulation.ts
@@ -65,6 +65,7 @@ export interface ProductionNode {
    quantity: number;
  }>;
  cycleTime: number;
+  factoryCount: number;
 }

 export interface ProductionChainBalance {
--- a/src/app/components/PlanetaryInteraction/ExtractionSimulationDisplay.tsx
+++ b/src/app/components/PlanetaryInteraction/ExtractionSimulationDisplay.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box, Paper, Typography, Stack } from '@mui/material';
 import { Line } from 'react-chartjs-2';
-import { useTheme } from '@mui/material';
 import { getProgramOutputPrediction, ProductionNode } from './ExtractionSimulation';
 import { PI_TYPES_MAP } from '@/const';
 import { ProductionChainVisualization } from './ProductionChainVisualization';
@@ -15,6 +14,8 @@ import {
  Tooltip,
  Legend
 } from 'chart.js';
+import { DateTime } from 'luxon';
+import Countdown from 'react-countdown';

 ChartJS.register(
  CategoryScale,
@@ -43,6 +44,7 @@ export const ExtractionSimulationDisplay: React.FC<ExtractionSimulationDisplayPr
  extractors,
  productionNodes
 }) => {
+
  const CYCLE_TIME = 30 * 60; // 30 minutes in seconds

  // Calculate program duration and cycles for each extractor
@@ -57,6 +59,7 @@ export const ExtractionSimulationDisplay: React.FC<ExtractionSimulationDisplayPr
    };
  });

+
  const maxCycles = Math.max(...extractorPrograms.map(e => e.cycles));

  // Get output predictions for each extractor
@@ -156,14 +159,18 @@ export const ExtractionSimulationDisplay: React.FC<ExtractionSimulationDisplayPr
  const installedSchematicIds = Array.from(new Set(productionNodes.map(node => node.schematicId)));

  // Create factories array with correct counts
-  const factories = installedSchematicIds.map(schematicId => ({
-    schematic_id: schematicId,
-    count: productionNodes.filter(node => node.schematicId === schematicId).length
-  }));
+  const factories = installedSchematicIds.map(schematicId => {
+    const node = productionNodes.find(n => n.schematicId === schematicId);
+    if (!node) return { schematic_id: schematicId, count: 0 };
+    return {
+      schematic_id: schematicId,
+      count: node.factoryCount
+    };
+  });

  return (
    <Box>
-      <Paper sx={{ p: 2 }}>
+      {extractors.length > 0 ? <Paper sx={{ p: 2 }}>
        <Typography variant="h6" gutterBottom>
          Extraction Simulation
        </Typography>
@@ -191,20 +198,27 @@ export const ExtractionSimulationDisplay: React.FC<ExtractionSimulationDisplayPr
              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
                • Expiry Time: {new Date(expiryTime).toLocaleString()}
              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Factory Count: {factories.find(f => f.schematic_id === typeId)?.count ?? 0}
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Expires in: <Countdown overtime={true} date={DateTime.fromISO(expiryTime).toMillis()} />
+              </Typography>
            </Stack>
          ))}
        </Box>
        <div style={{ height: '300px' }}>
          <Line data={chartData} options={chartOptions} />
        </div>
-      </Paper>
+      </Paper> : null}

      <ProductionChainVisualization
        extractedTypeIds={extractedTypeIds}
        extractors={extractors.map(e => ({
          typeId: e.typeId,
          baseValue: e.baseValue,
-          cycleTime: CYCLE_TIME
+          cycleTime: CYCLE_TIME,
+          expiryTime: e.expiryTime
        }))}
        factories={factories}
        extractorTotals={extractorTotals}
--- a/src/app/components/PlanetaryInteraction/ExtractionSimulationTooltip.tsx
+++ b/src/app/components/PlanetaryInteraction/ExtractionSimulationTooltip.tsx
@@ -0,0 +1,210 @@
+import React 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 {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import { DateTime } from 'luxon';
+import Countdown from 'react-countdown';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+interface ExtractorConfig {
+  typeId: number;
+  baseValue: number;
+  cycleTime: number;
+  installTime: string;
+  expiryTime: string;
+}
+
+interface ExtractionSimulationTooltipProps {
+  extractors: ExtractorConfig[];
+}
+
+export const ExtractionSimulationTooltip: React.FC<ExtractionSimulationTooltipProps> = ({
+  extractors
+}) => {
+  const CYCLE_TIME = 30 * 60; // 30 minutes in seconds
+
+  // Calculate program duration and cycles for each extractor
+  const extractorPrograms = extractors.map(extractor => {
+    const installDate = new Date(extractor.installTime);
+    const expiryDate = new Date(extractor.expiryTime);
+    const programDuration = (expiryDate.getTime() - installDate.getTime()) / 1000; // Convert to seconds
+    return {
+      ...extractor,
+      programDuration,
+      cycles: Math.floor(programDuration / CYCLE_TIME)
+    };
+  });
+
+  const maxCycles = Math.max(...extractorPrograms.map(e => e.cycles));
+
+  // Get output predictions for each extractor
+  const extractorOutputs = extractorPrograms.map(extractor => ({
+    typeId: extractor.typeId,
+    cycleTime: CYCLE_TIME,
+    cycles: extractor.cycles,
+    prediction: getProgramOutputPrediction(
+      extractor.baseValue,
+      CYCLE_TIME,
+      extractor.cycles
+    )
+  }));
+
+  // Create datasets for the chart
+  const datasets = extractorOutputs.map((output, index) => {
+    const hue = (360 / extractors.length) * index;
+    return {
+      label: `${PI_TYPES_MAP[output.typeId]?.name ?? `Resource ${output.typeId}`}`,
+      data: output.prediction,
+      borderColor: `hsl(${hue}, 70%, 50%)`,
+      backgroundColor: `hsl(${hue}, 70%, 80%)`,
+      tension: 0.4
+    };
+  });
+
+  const chartData = {
+    labels: Array.from({ length: maxCycles }, (_, i) => {
+      return (i % 4 === 0) ? `Cycle ${i + 1}` : '';
+    }),
+    datasets
+  };
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+      },
+      title: {
+        display: true,
+        text: 'Extraction Output Prediction'
+      },
+      tooltip: {
+        callbacks: {
+          title: (context: any) => `Cycle ${context[0].dataIndex + 1}`,
+          label: (context: any) => `Output: ${context.raw.toFixed(1)} units`
+        }
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: 'Units per Cycle'
+        }
+      },
+      x: {
+        ticks: {
+          autoSkip: true,
+          maxTicksLimit: 24
+        }
+      }
+    }
+  };
+
+  return (
+    <Paper sx={{ p: 1, bgcolor: 'background.paper', minWidth: 800 }}>
+      <Stack direction="row" spacing={2} sx={{ width: '100%' }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <div style={{ height: '200px' }}>
+            <Line data={chartData} options={chartOptions} />
+          </div>
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Stack spacing={1}>
+            {extractorPrograms.map(({ typeId, cycleTime, cycles, installTime, expiryTime }, idx) => {
+              const prediction = getProgramOutputPrediction(
+                extractors[idx].baseValue,
+                CYCLE_TIME,
+                cycles
+              );
+              const totalOutput = prediction.reduce((sum, val) => sum + val, 0);
+              
+              return (
+                <Paper key={typeId} sx={{ p: 1, bgcolor: 'background.default' }}>
+                  <Typography variant="subtitle2">
+                    {PI_TYPES_MAP[typeId]?.name}
+                  </Typography>
+                  <Stack spacing={0.5}>
+                    <Typography variant="body2">
+                      • Total Output: {totalOutput.toFixed(1)} units per program
+                    </Typography>
+                    <Typography variant="body2">
+                      • Cycle Time: {(cycleTime / 60).toFixed(1)} minutes
+                    </Typography>
+                    <Typography variant="body2">
+                      • Program Cycles: {cycles}
+                    </Typography>
+                    <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>
+                    <Typography variant="body2">
+                      • Expires in: <Countdown overtime={true} date={DateTime.fromISO(expiryTime).toMillis()} />
+                    </Typography>
+                  </Stack>
+                </Paper>
+              );
+            })}
+            {extractors.length === 2 && (
+              <Paper sx={{ p: 1, bgcolor: 'background.default' }}>
+                <Typography variant="subtitle2" color="error">
+                  Balance
+                </Typography>
+                <Stack spacing={0.5}>
+                  {extractors.map((extractor, index) => {
+                    const averagePerHour = (extractor.baseValue * 3600) / extractor.cycleTime;
+                    return (
+                      <Typography key={index} variant="body2">
+                        • {PI_TYPES_MAP[extractor.typeId]?.name}: {averagePerHour.toFixed(1)} u/h
+                      </Typography>
+                    );
+                  })}
+                  <Typography 
+                    variant="body2" 
+                    color="error"
+                    sx={{ 
+                      mt: 1,
+                      fontWeight: 'bold',
+                      borderTop: '1px solid',
+                      borderColor: 'divider',
+                      pt: 1
+                    }}
+                  >
+                    Difference: {Math.abs(
+                      (extractors[0].baseValue * 3600 / extractors[0].cycleTime) - 
+                      (extractors[1].baseValue * 3600 / extractors[1].cycleTime)
+                    ).toFixed(1)} u/h
+                  </Typography>
+                </Stack>
+              </Paper>
+            )}
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}; 
--- a/src/app/components/PlanetaryInteraction/PlanetCard.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetCard.tsx
@@ -1,31 +1,21 @@
-import { Stack, Typography, styled, useTheme } from "@mui/material";
+import { Stack, Typography, styled, useTheme, Tooltip } from "@mui/material";
 import Image from "next/image";
 import {
  AccessToken,
-  Planet,
-  PlanetInfo,
-  PlanetInfoUniverse,
  PlanetWithInfo,
 } from "@/types";
-import React, { forwardRef, useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 import { DateTime } from "luxon";
 import { EXTRACTOR_TYPE_IDS } from "@/const";
 import Countdown from "react-countdown";
-import PinsCanvas3D from "./PinsCanvas3D";
-import Slide from "@mui/material/Slide";
-import { TransitionProps } from "@mui/material/transitions";
-import Dialog from "@mui/material/Dialog";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import Button from "@mui/material/Button";
+import { getProgramOutputPrediction } from "./ExtractionSimulation";
 import {
  alertModeVisibility,
  extractorsHaveExpired,
  timeColor,
 } from "./timeColors";
 import { ColorContext, SessionContext } from "@/app/context/Context";
+import { ExtractionSimulationTooltip } from "./ExtractionSimulationTooltip";

 const StackItem = styled(Stack)(({ theme }) => ({
  ...theme.typography.body2,
@@ -36,15 +26,6 @@ const StackItem = styled(Stack)(({ theme }) => ({
  alignItems: "center",
 }));

-const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement;
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
 export const PlanetCard = ({
  character,
  planet,
@@ -57,18 +38,8 @@ export const PlanetCard = ({
  const planetInfo = planet.info;
  const planetInfoUniverse = planet.infoUniverse;

-  const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
-
  const theme = useTheme();

-  const handle3DrenderOpen = () => {
-    setPlanetRenderOpen(true);
-  };
-
-  const handle3DrenderClose = () => {
-    setPlanetRenderOpen(false);
-  };
-
  const extractorsExpiryTime =
    (planetInfo &&
      planetInfo.pins
@@ -79,7 +50,77 @@ export const PlanetCard = ({
  const { colors } = useContext(ColorContext);
  const expired = extractorsHaveExpired(extractorsExpiryTime);

+  const CYCLE_TIME = 30 * 60; // 30 minutes in seconds
+
+  const extractors = planetInfo?.pins
+    .filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
+    .map((p) => ({
+      typeId: p.type_id,
+      baseValue: p.extractor_details?.qty_per_cycle || 0,
+      cycleTime: p.extractor_details?.cycle_time || 3600,
+      installTime: p.install_time || "",
+      expiryTime: p.expiry_time || "",
+      installedSchematicId: p.extractor_details?.product_type_id || undefined
+    })) || [];
+
+  // Calculate program duration and cycles for each extractor
+  const extractorPrograms = extractors.map(extractor => {
+    const installDate = new Date(extractor.installTime);
+    const expiryDate = new Date(extractor.expiryTime);
+    const programDuration = (expiryDate.getTime() - installDate.getTime()) / 1000; // Convert to seconds
+    return {
+      ...extractor,
+      programDuration,
+      cycles: Math.floor(programDuration / CYCLE_TIME)
+    };
+  });
+
+
+  // Get output predictions for each extractor
+  const extractorOutputs = extractorPrograms.map(extractor => ({
+    typeId: extractor.typeId,
+    cycleTime: CYCLE_TIME,
+    cycles: extractor.cycles,
+    prediction: getProgramOutputPrediction(
+      extractor.baseValue,
+      CYCLE_TIME,
+      extractor.cycles
+    )
+  }));
+
+  // Calculate average per hour for each extractor
+  const extractorAverages = extractorOutputs.map(extractor => {
+    const totalOutput = extractor.prediction.reduce((sum, val) => sum + val, 0);
+    const programDuration = extractor.cycles * CYCLE_TIME;
+    const averagePerHour = (totalOutput / programDuration) * 3600;
+    return {
+      typeId: extractor.typeId,
+      averagePerHour
+    };
+  });
+
  return (
+    <Tooltip
+      title={
+        extractors.length > 0 ? (
+          <ExtractionSimulationTooltip
+            extractors={extractors}
+          />
+        ) : null
+      }
+      componentsProps={{
+        tooltip: {
+          sx: {
+            bgcolor: 'background.paper',
+            '& .MuiTooltip-arrow': {
+              color: 'background.paper',
+            },
+            maxWidth: 'none',
+            width: 'fit-content'
+          }
+        }
+      }}
+    >
    <StackItem
      alignItems="flex-start"
      height="100%"
@@ -87,15 +128,32 @@ export const PlanetCard = ({
      minHeight={theme.custom.cardMinHeight}
      visibility={alertModeVisibility(alertMode, expired)}
    >
-      <Image
-        unoptimized
-        src={`/${planet.planet_type}.png`}
-        alt=""
-        width={theme.custom.cardImageSize}
-        height={theme.custom.cardImageSize}
-        style={{ borderRadius: 8, marginRight: 4 }}
-        onClick={handle3DrenderOpen}
-      />
+      
+        <div style={{ position: 'relative' }}>
+          <Image
+            unoptimized
+            src={`/${planet.planet_type}.png`}
+            alt=""
+            width={theme.custom.cardImageSize}
+            height={theme.custom.cardImageSize}
+            style={{ 
+              borderRadius: 8, 
+              marginRight: 4,
+              position: 'relative',
+              zIndex: 0
+            }}
+          />
+          <div style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: theme.custom.cardImageSize,
+            height: theme.custom.cardImageSize,
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            borderRadius: 8,
+          }} />
+        </div>
+     
      {expired && (
        <Image
          width={32}
@@ -109,55 +167,41 @@ export const PlanetCard = ({
        <Typography fontSize={theme.custom.smallText}>
          {planetInfoUniverse?.name}
        </Typography>
-        <Typography fontSize={theme.custom.smallText}>
-          L{planet.upgrade_level}
-        </Typography>
+        {extractorsExpiryTime.map((e, idx) => {
+          const extractor = extractors[idx];
+          const average = extractorAverages[idx];
+          return (
+            <div key={`${e}-${idx}-${character.character.characterId}`}>
+              <Typography
+                color={timeColor(e, colors)}
+                fontSize={theme.custom.smallText}
+              >
+                {!expired && e && <Countdown
+                    overtime={true}
+                    date={DateTime.fromISO(e).toMillis()}
+                  />
+                }
+              </Typography>
+              {!expired && extractor && average && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Image
+                    unoptimized
+                    src={`https://images.evetech.net/types/${extractor.installedSchematicId}/icon?size=32`}
+                    alt=""
+                    width={16}
+                    height={16}
+                    style={{ borderRadius: 4 }}
+                  />
+                  <Typography fontSize={theme.custom.smallText}>
+                    {average.averagePerHour.toFixed(1)}/h
+                  </Typography>
+                </div>
+              )}
+            </div>
+          );
+        })}
      </div>
-
-      {extractorsExpiryTime.map((e, idx) => {
-        return (
-          <Typography
-            key={`${e}-${idx}-${character.character.characterId}`}
-            color={timeColor(e, colors)}
-            fontSize={theme.custom.smallText}
-          >
-            {e ? (
-              <Countdown
-                overtime={true}
-                date={DateTime.fromISO(e).toMillis()}
-              />
-            ) : (
-              "STOPPED"
-            )}
-          </Typography>
-        );
-      })}
-      <Dialog
-        fullScreen
-        open={planetRenderOpen}
-        onClose={handle3DrenderClose}
-        TransitionComponent={Transition}
-      >
-        <AppBar sx={{ position: "relative" }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handle3DrenderClose}
-              aria-label="close"
-            >
-              <CloseIcon />
-            </IconButton>
-            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
-              {planetInfoUniverse?.name}
-            </Typography>
-            <Button autoFocus color="inherit" onClick={handle3DrenderClose}>
-              Close
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <PinsCanvas3D planetInfo={planetInfo} />
-      </Dialog>
    </StackItem>
+    </Tooltip>
  );
 };
--- a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
@@ -4,7 +4,7 @@ import { planetCalculations } from "@/planets";
 import { AccessToken, PlanetWithInfo } from "@/types";
 import CloseIcon from "@mui/icons-material/Close";
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { Button, Tooltip, Typography, useTheme, Menu, MenuItem, IconButton } from "@mui/material";
+import { Button, Tooltip, Typography, useTheme, Menu, MenuItem, IconButton, Checkbox, FormControlLabel } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Dialog from "@mui/material/Dialog";
 import Slide from "@mui/material/Slide";
@@ -20,10 +20,9 @@ import { PlanetConfigDialog } from "../PlanetConfig/PlanetConfigDialog";
 import PinsCanvas3D from "./PinsCanvas3D";
 import { alertModeVisibility, timeColor } from "./timeColors";
 import { ExtractionSimulationDisplay } from './ExtractionSimulationDisplay';
+import { ExtractionSimulationTooltip } from './ExtractionSimulationTooltip';
 import { ProductionNode } from './ExtractionSimulation';
 import { Collapse, Box, Stack } from "@mui/material";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';

 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
@@ -72,14 +71,15 @@ export const PlanetTableRow = ({
    setPlanetConfigOpen(false);
  };

-  const { piPrices, alertMode } = useContext(SessionContext);
+  const { piPrices, alertMode, updatePlanetConfig, readPlanetConfig, balanceThreshold } = useContext(SessionContext);
  const planetInfo = planet.info;
  const planetInfoUniverse = planet.infoUniverse;
  const { expired, extractors, localProduction, localImports, localExports } =
    planetCalculations(planet);
-  const planetConfig = character.planetConfig.find(
-    (p) => p.planetId === planet.planet_id,
-  );
+  const planetConfig = readPlanetConfig({
+    characterId: character.character.characterId,
+    planetId: planet.planet_id,
+  });
  const { colors } = useContext(ColorContext);
  // Convert local production to ProductionNode array for simulation
  const productionNodes: ProductionNode[] = Array.from(localProduction).map(([schematicId, schematic]) => ({
@@ -94,18 +94,25 @@ export const PlanetTableRow = ({
      typeId: output.type_id,
      quantity: output.quantity
    })),
-    cycleTime: schematic.cycle_time
+    cycleTime: schematic.cycle_time,
+    factoryCount: schematic.count || 1
  }));

-  // Convert Map to Array for schematic IDs
-  const installedSchematicIds = Array.from(localProduction.values()).map(p => p.schematic_id);
-  
-  // Get extractor head types safely
-  const extractedTypeIds = extractors
-    .map(e => e.extractor_details?.product_type_id)
-    .filter((id): id is number => id !== undefined);
+  // Calculate extractor averages and check for large differences
+  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 qtyPerCycle = e.extractor_details?.qty_per_cycle || 0;
+      return {
+        typeId: e.extractor_details!.product_type_id!,
+        averagePerHour: (qtyPerCycle * 3600) / cycleTime
+      };
+    });
+
+  const hasLargeExtractorDifference = extractorAverages.length === 2 && 
+    Math.abs(extractorAverages[0].averagePerHour - extractorAverages[1].averagePerHour) > balanceThreshold;

-  // Get storage facilities
  const storageFacilities = planetInfo.pins.filter(pin => 
    STORAGE_IDS().some(storage => storage.type_id === pin.type_id)
  );
@@ -116,30 +123,53 @@ export const PlanetTableRow = ({
    const storageType = PI_TYPES_MAP[pin.type_id].name;
    const storageCapacity = STORAGE_CAPACITIES[pin.type_id] || 0;
    
-    // Calculate total volume of stored products for this specific pin
    const totalVolume = (pin.contents || [])
      .reduce((sum: number, item: any) => {
        const volume = PI_PRODUCT_VOLUMES[item.type_id] || 0;
        return sum + (item.amount * volume);
      }, 0);

+    const totalValue = (pin.contents || [])
+      .reduce((sum: number, item: any) => {
+        const price = piPrices?.appraisal.items.find((a) => a.typeID === item.type_id)?.prices.sell.min ?? 0;
+        return sum + (item.amount * price);
+      }, 0);
+
    const fillRate = storageCapacity > 0 ? (totalVolume / storageCapacity) * 100 : 0;

    return {
      type: storageType,
      capacity: storageCapacity,
      used: totalVolume,
-      fillRate: fillRate
+      fillRate: fillRate,
+      value: totalValue
    };
  };

+  const handleExcludeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updatePlanetConfig({
+      ...planetConfig,
+      excludeFromTotals: event.target.checked,
+    });
+  };
+
  return (
    <>
      <TableRow
        style={{ visibility: alertModeVisibility(alertMode, expired) }}
-        sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+        sx={{ 
+          "&:last-child td, &:last-child th": { border: 0 },
+          cursor: 'pointer',
+          '&:hover': {
+            backgroundColor: 'action.hover'
+          }
+        }}
+        onClick={(e) => {
+          if (!(e.target as HTMLElement).closest('.clickable-cell')) return;
+          setSimulationOpen(!simulationOpen);
+        }}
      >
-        <TableCell component="th" scope="row">
+        <TableCell component="th" scope="row" className="clickable-cell">
          <Tooltip
            title={`${
              planet.planet_type.charAt(0).toUpperCase() +
@@ -154,12 +184,59 @@ export const PlanetTableRow = ({
                height={theme.custom.cardImageSize / 6}
                style={{ marginRight: "5px" }}
              />
-              {planetInfoUniverse?.name}
+              <Tooltip
+                placement="right"
+                title={
+                  extractors.length > 0 ? (
+                    <ExtractionSimulationTooltip
+                      extractors={extractors
+                        .filter(e => e.extractor_details?.product_type_id && e.extractor_details?.qty_per_cycle)
+                        .map(e => ({
+                          typeId: e.extractor_details!.product_type_id!,
+                          baseValue: e.extractor_details!.qty_per_cycle!,
+                          cycleTime: e.extractor_details!.cycle_time || 3600,
+                          installTime: e.install_time ?? "",
+                          expiryTime: e.expiry_time ?? ""
+                        }))}
+                    />
+                  ) : null
+                }
+                componentsProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      '& .MuiTooltip-arrow': {
+                        color: 'background.paper',
+                      },
+                      maxWidth: 'none',
+                      width: 'fit-content'
+                    }
+                  }
+                }}
+              >
+                <Stack spacing={0}>
+                  <Typography 
+                    fontSize={theme.custom.smallText}
+                    color={hasLargeExtractorDifference ? 'error' : 'inherit'}
+                  >
+                    {planetInfoUniverse?.name}
+                  </Typography>
+                  {hasLargeExtractorDifference && (
+                    <Typography 
+                      fontSize={theme.custom.smallText}
+                      color="error"
+                      sx={{ opacity: 0.7 }}
+                    >
+                      off-balance
+                    </Typography>
+                  )}
+                </Stack>
+              </Tooltip>
            </div>
          </Tooltip>
        </TableCell>
-        <TableCell>{planet.upgrade_level}</TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">{planet.upgrade_level}</TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {extractors.map((e, idx) => {
              return (
@@ -192,7 +269,7 @@ export const PlanetTableRow = ({
            })}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {Array.from(localProduction).map((schematic, idx) => {
              return (
@@ -206,19 +283,19 @@ export const PlanetTableRow = ({
            })}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localImports.map((i) => (
              <Typography
                key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
                fontSize={theme.custom.smallText}
              >
-                {PI_TYPES_MAP[i.type_id].name} ({i.quantity}/h)
+                {PI_TYPES_MAP[i.type_id].name} ({i.quantity * i.factoryCount}/h)
              </Typography>
            ))}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localExports.map((exports) => (
              <Typography
@@ -233,16 +310,21 @@ export const PlanetTableRow = ({
        <TableCell>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localExports.map((exports) => (
-              <Typography
+              <FormControlLabel
                key={`export-excluded-${character.character.characterId}-${planet.planet_id}-${exports.typeId}`}
-                fontSize={theme.custom.smallText}
-              >
-                {planetConfig?.excludeFromTotals ? "ex" : ""}
-              </Typography>
+                control={
+                  <Checkbox
+                    checked={planetConfig.excludeFromTotals}
+                    onChange={handleExcludeChange}
+                    size="small"
+                  />
+                }
+                label=""
+              />
            ))}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localExports.map((exports) => (
              <Typography
@@ -254,7 +336,7 @@ export const PlanetTableRow = ({
            ))}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div
            style={{
              display: "flex",
@@ -287,7 +369,7 @@ export const PlanetTableRow = ({
            })}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {storageFacilities
              .sort((a, b) => {
@@ -319,12 +401,17 @@ export const PlanetTableRow = ({
                    <Typography fontSize={theme.custom.smallText} style={{ color }}>
                      {fillRate.toFixed(1)}%
                    </Typography>
+                    {storageInfo.value > 0 && (
+                      <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px" }}>
+                        ({Math.round(storageInfo.value / 1000000)}M)
+                      </Typography>
+                    )}
                  </div>
                );
              })}
          </div>
        </TableCell>
-        <TableCell>
+        <TableCell className="menu-cell">
          <IconButton
            aria-label="more"
            aria-controls="planet-menu"
@@ -346,14 +433,6 @@ export const PlanetTableRow = ({
            }}>
              Configure Planet
            </MenuItem>
-            {extractors.length > 0 && (
-              <MenuItem onClick={() => {
-                setSimulationOpen(!simulationOpen);
-                handleMenuClose();
-              }}>
-                {simulationOpen ? 'Hide Extraction Simulation' : 'Show Extraction Simulation'}
-              </MenuItem>
-            )}
            <MenuItem onClick={() => {
              handle3DrenderOpen();
              handleMenuClose();
@@ -364,7 +443,7 @@ export const PlanetTableRow = ({
        </TableCell>
      </TableRow>
      <TableRow>
-        <TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0 }}>
+        <TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0, border: 'none' }}>
          <Collapse in={simulationOpen} timeout="auto" unmountOnExit>
            <Box sx={{ my: 2 }}>
              <ExtractionSimulationDisplay
--- a/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
@@ -1,5 +1,5 @@
 import { AccessToken } from "@/types";
-import { Stack, Tooltip, Typography, styled, useTheme } from "@mui/material";
+import { Icon, IconButton, Stack, Tooltip, Typography, styled, useTheme } from "@mui/material";
 import { PlanetCard } from "./PlanetCard";
 import { NoPlanetCard } from "./NoPlanetCard";
 import Table from "@mui/material/Table";
@@ -10,7 +10,7 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import { PlanetTableRow } from "./PlanetTableRow";
-import Image from "next/image";
+import { Settings } from "@mui/icons-material";

 const StackItem = styled(Stack)(({ theme }) => ({
  ...theme.typography.body2,
@@ -102,6 +102,13 @@ const PlanetaryIteractionTable = ({
                  </Typography>
                </Tooltip>
              </TableCell>
+              <TableCell>
+                <Tooltip title="Planet settings">
+                <IconButton aria-label="settings">
+                  <Settings fontSize="small" />
+                </IconButton>
+                </Tooltip>
+              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
@@ -152,8 +159,8 @@ export const PlanetaryInteractionRow = ({
  const theme = useTheme();

  return theme.custom.compactMode ? (
-    <PlanetaryInteractionIconsRow character={character} />
+    <div style={{ marginTop: "1.2rem" }}><PlanetaryInteractionIconsRow character={character} /></div>
  ) : (
-    <PlanetaryIteractionTable character={character} />
+    <div style={{ marginTop: "1.4rem" }}><PlanetaryIteractionTable character={character} /></div>
  );
 };
--- a/src/app/components/PlanetaryInteraction/ProductionChainVisualization.tsx
+++ b/src/app/components/PlanetaryInteraction/ProductionChainVisualization.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { Box, Paper, Typography, Grid, Stack, Divider } from '@mui/material';
+import { Box, Paper, Typography, Grid, Stack } from '@mui/material';
 import { EVE_IMAGE_URL } from '@/const';
 import { PI_TYPES_MAP } from '@/const';
+import { DateTime } from 'luxon';
+import Countdown from 'react-countdown';
+import Image from 'next/image';

 interface Factory {
  schematic_id: number;
@@ -29,6 +32,7 @@ interface ProductionChainVisualizationProps {
    typeId: number;
    baseValue: number;
    cycleTime: number;
+    expiryTime: string;
  }>;
  factories: Factory[];
  extractorTotals: Map<number, number>;
@@ -39,8 +43,10 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
  extractedTypeIds,
  factories,
  extractorTotals,
-  productionNodes
+  productionNodes,
+  extractors
 }) => {
+
  // Get all type IDs involved in the production chain
  const allTypeIds = new Set<number>();
  const requiredInputs = new Set<number>();
@@ -214,9 +220,15 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization

  // Get factory count for a type
  const getFactoryCount = (typeId: number): number => {
-    const node = nodesByOutput.get(typeId);
-    if (!node) return 0;
-    return factories.find(f => f.schematic_id === node.schematicId)?.count ?? 0;
+    // First find the node that produces this type
+    const producingNode = productionNodes.find(node => 
+      node.outputs.some(output => output.typeId === typeId)
+    );
+    
+    if (!producingNode) return 0;
+    
+    // Then find the factory count for this schematic
+    return factories.find(f => f.schematic_id === producingNode.schematicId)?.count ?? 0;
  };

  // Get input requirements for a type
@@ -232,6 +244,11 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
    return node?.cycleTime;
  };

+  // Get extractor expiry time for a type
+  const getExtractorExpiryTime = (typeId: number): string | undefined => {
+    return extractors.find(e => e.typeId === typeId)?.expiryTime;
+  };
+
  return (
    <Paper sx={{ p: 2, my: 2 }}>
      <Typography variant="h6" gutterBottom>
@@ -258,6 +275,7 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                  const consumption = consumptionTotals.get(typeId) ?? 0;
                  const inputs = getInputRequirements(typeId);
                  const cycleTime = getSchematicCycleTime(typeId);
+                  const expiryTime = getExtractorExpiryTime(typeId);

                  return (
                    <Grid item key={typeId} xs={12} sm={6} md={4}>
@@ -274,7 +292,7 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                        }}
                      >
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                          <img 
+                          <Image 
                            src={`${EVE_IMAGE_URL}/types/${typeId}/icon`} 
                            alt={type?.name ?? `Type ${typeId}`}
                            width={48}
@@ -292,19 +310,49 @@ export const ProductionChainVisualization: React.FC<ProductionChainVisualization
                          </Box>
                        </Box>
                        <Stack spacing={0.5}>
-                          {production > 0 && (
-                            <>
-                              <Typography variant="caption" color="success.main">
-                                Production: {production.toFixed(1)} units total
+                          {factoryCount > 0 && (
+                            <Typography variant="caption" color="info.main">
+                              Factories: {factoryCount}
+                            </Typography>
+                          )}
+                          {inputs.length > 0 && (
+                            <Box>
+                              <Typography variant="caption" color="text.secondary">
+                                Inputs:
                              </Typography>
-                            </>
+                              {inputs.map(input => (
+                                <Typography 
+                                  key={input.typeId} 
+                                  variant="caption" 
+                                  sx={{ display: 'block', ml: 1 }}
+                                >
+                                  {PI_TYPES_MAP[input.typeId]?.name}: {input.quantity * factoryCount}/cycle
+                                </Typography>
+                              ))}
+                            </Box>
+                          )}
+                          {expiryTime && (
+                            <Box>
+                              <Typography variant="caption" color="text.secondary">
+                                Extractor expires in:
+                              </Typography>
+                              <Typography variant="caption" sx={{ ml: 1 }}>
+                                <Countdown
+                                  overtime={true}
+                                  date={DateTime.fromISO(expiryTime).toMillis()}
+                                />
+                              </Typography>
+                            </Box>
+                          )}
+                          {production > 0 && (
+                            <Typography variant="caption" color="success.main">
+                              Production: {production.toFixed(1)} units total
+                            </Typography>
                          )}
                          {consumption > 0 && (
-                            <>
-                              <Typography variant="caption" color="error.main">
-                                Consumption: {consumption.toFixed(1)} units total
-                              </Typography>
-                            </>
+                            <Typography variant="caption" color="error.main">
+                              Consumption: {consumption.toFixed(1)} units total
+                            </Typography>
                          )}
                          {isImported && (
                            <>
--- a/src/app/components/Settings/SettingsButtons.tsx
+++ b/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>
--- a/src/app/components/Summary/Summary.tsx
+++ b/src/app/components/Summary/Summary.tsx
@@ -1,5 +1,5 @@
 import { SessionContext } from "@/app/context/Context";
-import { PI_TYPES_MAP } from "@/const";
+import { PI_TYPES_MAP, STORAGE_IDS } from "@/const";
 import { planetCalculations } from "@/planets";
 import { AccessToken } from "@/types";
 import {
@@ -19,10 +19,12 @@ import {
  AccordionSummary,
  AccordionDetails,
  TableSortLabel,
+  Box,
+  TextField,
 } from "@mui/material";
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { argv0 } from "process";
+import { DateTime } from "luxon";

 const StackItem = styled(Stack)(({ theme }) => ({
  ...theme.typography.body2,
@@ -41,13 +43,39 @@ const displayValue = (valueInMillions: number): string =>
    ? `${(valueInMillions / 1000).toFixed(2)} B`
    : `${valueInMillions.toFixed(2)} M`;

-type SortBy = "name" | "perHour" | "price";
+type SortBy = "name" | "perHour" | "storage" | "price" | "storagePrice" | "progress";
 type SortDirection = "asc" | "desc";

 export const Summary = ({ characters }: { characters: AccessToken[] }) => {
  const { piPrices } = useContext(SessionContext);
  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
  const [sortBy, setSortBy] = useState<SortBy>("name");
+  const [startDate, setStartDate] = useState<string>(DateTime.now().startOf('day').toISO());
+  const [activityPercentage, setActivityPercentage] = useState<number>(100);
+
+  // Load saved values from localStorage on mount
+  useEffect(() => {
+    const savedDate = localStorage.getItem('productionStartDate');
+    if (savedDate) {
+      setStartDate(savedDate);
+    }
+
+    const savedActivity = localStorage.getItem('activityPercentage');
+    if (savedActivity) {
+      setActivityPercentage(parseFloat(savedActivity));
+    }
+  }, []);
+
+  // Save values to localStorage when they change
+  useEffect(() => {
+    localStorage.setItem('productionStartDate', startDate);
+  }, [startDate]);
+
+  useEffect(() => {
+    localStorage.setItem('activityPercentage', activityPercentage.toString());
+  }, [activityPercentage]);
+
+  // Calculate exports and storage amounts
  const exports = characters.flatMap((char) => {
    return char.planets
      .filter(
@@ -62,6 +90,28 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
      });
  });

+  // Calculate storage amounts
+  const storageAmounts = characters.reduce<Grouped>((totals, character) => {
+    character.planets
+      .filter(
+        (p) =>
+          !character.planetConfig.some(
+            (c) => c.planetId == p.planet_id && c.excludeFromTotals,
+          ),
+      )
+      .forEach((planet) => {
+        planet.info.pins
+          .filter(pin => STORAGE_IDS().some(storage => storage.type_id === pin.type_id))
+          .forEach(storage => {
+            storage.contents?.forEach(content => {
+              const current = totals[content.type_id] || 0;
+              totals[content.type_id] = current + content.amount;
+            });
+          });
+      });
+    return totals;
+  }, {});
+
  const groupedByMaterial = exports.reduce<Grouped>((totals, material) => {
    const { typeId, amount } = material;
    const newTotal = isNaN(totals[typeId]) ? amount : totals[typeId] + amount;
@@ -69,27 +119,44 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
    return totals;
  }, {});

+  const startDateTime = DateTime.fromISO(startDate);
+  const hoursSinceStart = DateTime.now().diff(startDateTime, 'hours').hours;
+
  const withProductNameAndPrice = Object.keys(groupedByMaterial).map(
    (typeIdString) => {
      const typeId = parseInt(typeIdString);
      const amount = groupedByMaterial[typeId];
+      const storageAmount = storageAmounts[typeId] || 0;
+      const adjustedAmount = amount * (activityPercentage / 100);
      const valueInMillions =
        (((piPrices?.appraisal.items.find((a) => a.typeID === typeId)?.prices
          .sell.min ?? 0) *
-          amount) /
+          adjustedAmount) /
          1000000) *
        24 *
        30;
+      const storageValueInMillions =
+        ((piPrices?.appraisal.items.find((a) => a.typeID === typeId)?.prices
+          .sell.min ?? 0) *
+          storageAmount) /
+        1000000;
+
+      // Calculate expected production and progress
+      const expectedProduction = adjustedAmount * hoursSinceStart;
+      const progress = hoursSinceStart > 0 ? (storageAmount / expectedProduction) * 100 : 0;

      return {
        typeId,
-        amount,
+        amount: adjustedAmount,
+        storageAmount,
        materialName: PI_TYPES_MAP[typeId].name,
        price: valueInMillions,
+        storageValue: storageValueInMillions,
+        progress,
      };
    },
  );
-  const theme = useTheme();
+

  return (
    <StackItem width="100%">
@@ -98,14 +165,48 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
          <h2>Totals</h2>
        </AccordionSummary>
        <AccordionDetails>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+            <TextField
+              label="Production Start Date"
+              type="date"
+              value={DateTime.fromISO(startDate).toFormat('yyyy-MM-dd')}
+              onChange={(e) => {
+                const newDate = DateTime.fromFormat(e.target.value, 'yyyy-MM-dd').startOf('day').toISO();
+                if (newDate) setStartDate(newDate);
+              }}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              size="small"
+            />
+            <TextField
+              label="Activity %"
+              type="number"
+              value={activityPercentage}
+              onChange={(e) => {
+                const value = Math.min(100, Math.max(0, parseFloat(e.target.value) || 0));
+                setActivityPercentage(value);
+              }}
+              InputLabelProps={{
+                shrink: true,
+              }}
+              inputProps={{
+                min: 0,
+                max: 100,
+                step: 1,
+              }}
+              size="small"
+              sx={{ width: '100px' }}
+            />
+          </Box>
          <TableContainer component={Paper}>
            <Table size="small" aria-label="a dense table">
              <TableHead>
                <TableRow>
-                  <TableCell width="40%">
+                  <TableCell width="20%">
                    <Tooltip title="What exports factories are producing">
                      <TableSortLabel
-                        active={true}
+                        active={sortBy === "name"}
                        direction={sortDirection}
                        onClick={() => {
                          setSortDirection(
@@ -118,10 +219,10 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                      </TableSortLabel>
                    </Tooltip>
                  </TableCell>
-                  <TableCell width="10%">
-                    <Tooltip title="How many units per hour factories are producing">
+                  <TableCell width="10%" align="right">
+                    <Tooltip title={`Adjusted production rate (${activityPercentage}% activity)`}>
                      <TableSortLabel
-                        active={true}
+                        active={sortBy === "perHour"}
                        direction={sortDirection}
                        onClick={() => {
                          setSortDirection(
@@ -135,9 +236,41 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                    </Tooltip>
                  </TableCell>
                  <TableCell width="10%" align="right">
-                    <Tooltip title="How many million ISK per month this planet is exporting (Jita sell min)">
+                    <Tooltip title="Amount currently in storage">
                      <TableSortLabel
-                        active={true}
+                        active={sortBy === "storage"}
+                        direction={sortDirection}
+                        onClick={() => {
+                          setSortDirection(
+                            sortDirection === "asc" ? "desc" : "asc",
+                          );
+                          setSortBy("storage");
+                        }}
+                      >
+                        Units in storage
+                      </TableSortLabel>
+                    </Tooltip>
+                  </TableCell>
+                  <TableCell width="15%" align="right">
+                    <Tooltip title="Current ISK value of storage">
+                      <TableSortLabel
+                        active={sortBy === "storagePrice"}
+                        direction={sortDirection}
+                        onClick={() => {
+                          setSortDirection(
+                            sortDirection === "asc" ? "desc" : "asc",
+                          );
+                          setSortBy("storagePrice");
+                        }}
+                      >
+                        Produced ISK value
+                      </TableSortLabel>
+                    </Tooltip>
+                  </TableCell>
+                  <TableCell width="15%" align="right">
+                    <Tooltip title="Monthly ISK value from production">
+                      <TableSortLabel
+                        active={sortBy === "price"}
                        direction={sortDirection}
                        onClick={() => {
                          setSortDirection(
@@ -146,7 +279,23 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                          setSortBy("price");
                        }}
                      >
-                        ISK/M
+                        Maximum possible ISK/M
+                      </TableSortLabel>
+                    </Tooltip>
+                  </TableCell>
+                  <TableCell width="15%" align="right">
+                    <Tooltip title="Progress towards monthly production target">
+                      <TableSortLabel
+                        active={sortBy === "progress"}
+                        direction={sortDirection}
+                        onClick={() => {
+                          setSortDirection(
+                            sortDirection === "asc" ? "desc" : "asc",
+                          );
+                          setSortBy("progress");
+                        }}
+                      >
+                        Progress from start date
                      </TableSortLabel>
                    </Tooltip>
                  </TableCell>
@@ -167,12 +316,30 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                      if (sortDirection === "desc")
                        return a.amount > b.amount ? -1 : 1;
                    }
+                    if (sortBy === "storage") {
+                      if (sortDirection === "asc")
+                        return a.storageAmount > b.storageAmount ? 1 : -1;
+                      if (sortDirection === "desc")
+                        return a.storageAmount > b.storageAmount ? -1 : 1;
+                    }
                    if (sortBy === "price") {
                      if (sortDirection === "asc")
                        return a.price > b.price ? 1 : -1;
                      if (sortDirection === "desc")
                        return a.price > b.price ? -1 : 1;
                    }
+                    if (sortBy === "storagePrice") {
+                      if (sortDirection === "asc")
+                        return a.storageValue > b.storageValue ? 1 : -1;
+                      if (sortDirection === "desc")
+                        return a.storageValue > b.storageValue ? -1 : 1;
+                    }
+                    if (sortBy === "progress") {
+                      if (sortDirection === "asc")
+                        return a.progress > b.progress ? 1 : -1;
+                      if (sortDirection === "desc")
+                        return a.progress > b.progress ? -1 : 1;
+                    }
                    return 0;
                  })
                  .map((product) => (
@@ -180,7 +347,10 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                      key={product.materialName}
                      material={product.materialName}
                      amount={product.amount}
+                      storageAmount={product.storageAmount}
                      price={product.price}
+                      storageValue={product.storageValue}
+                      progress={product.progress}
                    />
                  ))}
                <SummaryRow
@@ -189,6 +359,10 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                    (amount, p) => amount + p.price,
                    0,
                  )}
+                  storageValue={withProductNameAndPrice.reduce(
+                    (amount, p) => amount + p.storageValue,
+                    0,
+                  )}
                />
              </TableBody>
            </Table>
@@ -202,17 +376,32 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
 const SummaryRow = ({
  material,
  amount,
+  storageAmount,
  price,
+  storageValue,
+  progress,
 }: {
  material: string;
  amount?: number;
+  storageAmount?: number;
  price: number;
+  storageValue?: number;
+  progress?: number;
 }) => (
  <TableRow>
    <TableCell component="th" scope="row">
      {material}
    </TableCell>
-    <TableCell>{amount}</TableCell>
+    <TableCell align="right">{amount?.toFixed(1)}</TableCell>
+    <TableCell align="right">{storageAmount?.toFixed(1)}</TableCell>
+        <TableCell align="right">{storageValue !== undefined && displayValue(storageValue)}</TableCell>
    <TableCell align="right">{displayValue(price)}</TableCell>
+    <TableCell align="right">
+      {progress !== undefined && (
+        <Typography color={progress >= 100 ? 'success.main' : progress >= 75 ? 'warning.main' : 'error.main'}>
+          {progress.toFixed(1)}%
+        </Typography>
+      )}
+    </TableCell>
  </TableRow>
 );
--- a/src/app/context/Context.tsx
+++ b/src/app/context/Context.tsx
@@ -1,7 +1,6 @@
 import { EvePraisalResult } from "@/eve-praisal";
-import { AccessToken, CharacterUpdate } from "@/types";
+import { AccessToken, CharacterUpdate, PlanetConfig } from "@/types";
 import { Dispatch, SetStateAction, createContext } from "react";
-import { PlanetConfig } from "../components/PlanetConfig/PlanetConfigDialog";

 export const CharacterContext = createContext<{
  characters: AccessToken[];
@@ -36,6 +35,8 @@ export const SessionContext = createContext<{
    characterId: number;
    planetId: number;
  }) => PlanetConfig;
+  balanceThreshold: number;
+  setBalanceThreshold: Dispatch<SetStateAction<number>>;
 }>({
  sessionReady: false,
  refreshSession: () => {},
@@ -59,6 +60,8 @@ export const SessionContext = createContext<{
  }) => {
    return { characterId, planetId, excludeFromTotals: true };
  },
+  balanceThreshold: 1000,
+  setBalanceThreshold: () => {},
 });
 export type ColorSelectionType = {
  defaultColor: string;
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,7 +17,7 @@ import {
 import { useSearchParams } from "next/navigation";
 import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
 import { getPlanet, getPlanetUniverse, getPlanets } from "@/planets";
-import { PlanetConfig } from "./components/PlanetConfig/PlanetConfigDialog";
+import { PlanetConfig } from "@/types";

 const Home = () => {
  const searchParams = useSearchParams();
@@ -29,6 +29,7 @@ const Home = () => {
  const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
    undefined,
  );
+  const [balanceThreshold, setBalanceThreshold] = useState(1000);

  const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
  const [alertMode, setAlertMode] = useState(false);
@@ -199,6 +200,17 @@ const Home = () => {
    setAlertMode(JSON.parse(storedAlertMode));
  }, []);

+  useEffect(() => {
+    const storedBalanceThreshold = localStorage.getItem("balanceThreshold");
+    if (storedBalanceThreshold) {
+      setBalanceThreshold(parseInt(storedBalanceThreshold));
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("balanceThreshold", balanceThreshold.toString());
+  }, [balanceThreshold]);
+
  useEffect(() => {
    localStorage.setItem("compactMode", compactMode ? "true" : "false");
  }, [compactMode]);
@@ -236,7 +248,7 @@ const Home = () => {
  }, []);

  useEffect(() => {
-    const ESI_CACHE_TIME_MS = 600000;
+    const ESI_CACHE_TIME_MS = 3000000;
    const interval = setInterval(() => {
      const characters = initializeCharacters();
      refreshSession(characters)
@@ -264,6 +276,8 @@ const Home = () => {
        toggleAlertMode,
        updatePlanetConfig,
        readPlanetConfig,
+        balanceThreshold,
+        setBalanceThreshold,
      }}
    >
      <CharacterContext.Provider
--- a/src/planets.ts
+++ b/src/planets.ts
@@ -51,7 +51,7 @@ export const getPlanetUniverse = async (
 export const planetCalculations = (planet: PlanetWithInfo) => {
  const planetInfo = planet.info;
  type SchematicId = number;
-  const extractors: PlanetInfo["pins"] = planetInfo.pins.filter((p) =>
+  const extractors = planetInfo.pins.filter((p) =>
    EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id),
  );
  const localProduction = planetInfo.pins
@@ -61,10 +61,19 @@ export const planetCalculations = (planet: PlanetWithInfo) => {
        const schematic = PI_SCHEMATICS.find(
          (s) => s.schematic_id == f.schematic_id,
        );
-        if (schematic) acc.set(f.schematic_id, schematic);
+        if (schematic) {
+          const existing = acc.get(f.schematic_id);
+          if (existing) {
+            // If we already have this schematic, increment its count
+            existing.count = (existing.count || 0) + 1;
+          } else {
+            // First time seeing this schematic, set count to 1
+            acc.set(f.schematic_id, { ...schematic, count: 1 });
+          }
+        }
      }
      return acc;
-    }, new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>());
+    }, new Map<SchematicId, (typeof PI_SCHEMATICS)[number] & { count: number }>());

  const locallyProduced = Array.from(localProduction)
    .flatMap((p) => p[1].outputs)
@@ -85,7 +94,13 @@ export const planetCalculations = (planet: PlanetWithInfo) => {
        ![...locallyProduced, ...locallyExcavated].some(
          (lp) => lp === p.type_id,
        ),
-    );
+    ).map((p) => ({
+      ...p,
+      factoryCount: planetInfo.pins
+        .filter((f) => f.schematic_id === p.schematic_id)
+        .length,
+    }));
+

  const localExports = locallyProduced
    .filter((p) => !locallyConsumed.some((lp) => lp === p))
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,3 @@
-import { PlanetConfig } from "./app/components/PlanetConfig/PlanetConfigDialog";
-import { Api } from "./esi-api";
-
 export interface AccessToken {
  access_token: string;
  expires_at: number;
@@ -20,10 +17,50 @@ export interface Character {
  characterId: number;
 }

+export interface Planet {
+  planet_id: number;
+  solar_system_id: number;
+  planet_type: "temperate" | "barren" | "oceanic" | "ice" | "gas" | "lava" | "storm" | "plasma";
+  last_update: string;
+  num_pins: number;
+  owner_id: number;
+  upgrade_level: number;
+}
+
+export interface PlanetInfo {
+  links: Array<{
+    destination_pin_id: number;
+    link_level: number;
+    source_pin_id: number;
+  }>;
+  pins: Pin[];
+  routes: Array<{
+    content_type_id: number;
+    destination_pin_id: number;
+    quantity: number;
+    route_id: number;
+    source_pin_id: number;
+    waypoints?: number[];
+  }>;
+}
+
+export interface PlanetInfoUniverse {
+  name: string;
+  planet_id: number;
+  system_id: number;
+  type_id: number;
+  position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+}
+
 export interface PlanetWithInfo extends Planet {
  info: PlanetInfo;
  infoUniverse: PlanetInfoUniverse;
 }
+
 export interface CharacterPlanets {
  name: string;
  characterId: number;
@@ -38,31 +75,51 @@ export interface CharacterUpdate {
  system?: string;
 }

-export type Planet = EsiType<"v1", "getCharactersCharacterIdPlanets">[number];
-
-export type PlanetInfoUniverse = EsiType<"v1", "getUniversePlanetsPlanetId">;
-
-export type PlanetInfo = EsiType<
-  "v3",
-  "getCharactersCharacterIdPlanetsPlanetId"
->;
-
 export interface Env {
  EVE_SSO_CALLBACK_URL: string;
  EVE_SSO_CLIENT_ID: string;
 }

-type EsiApiVersionType = keyof InstanceType<typeof Api<unknown>>;
-type EsiApiPathType<V extends EsiApiVersionType> = keyof InstanceType<
-  typeof Api<unknown>
->[V];
-type EsiApiResponseType<
-  V extends EsiApiVersionType,
-  T extends EsiApiPathType<V>,
-> = Awaited<ReturnType<InstanceType<typeof Api<unknown>>[V][T]>>;
-export type EsiType<
-  V extends EsiApiVersionType,
-  T extends EsiApiPathType<V>,
-> = EsiApiResponseType<V, T> extends { data: any }
-  ? EsiApiResponseType<V, T>["data"]
-  : never;
+export interface EvePraisalResult {
+  appraisal: {
+    items: Array<{
+      typeID: number;
+      prices: {
+        sell: {
+          min: number;
+        };
+      };
+    }>;
+  };
+}
+
+export interface Pin {
+  pin_id: number;
+  type_id: number;
+  schematic_id?: number;
+  expiry_time?: string;
+  install_time?: string;
+  latitude: number;
+  longitude: number;
+  extractor_details?: {
+    cycle_time?: number;
+    head_radius?: number;
+    heads: Array<{
+      head_id: number;
+      latitude: number;
+      longitude: number;
+    }>;
+    product_type_id?: number;
+    qty_per_cycle?: number;
+  };
+  contents?: Array<{
+    type_id: number;
+    amount: number;
+  }>;
+}
+
+export interface PlanetConfig {
+  characterId: number;
+  planetId: number;
+  excludeFromTotals: boolean;
+}
Author	SHA1	Message	Date
calli	67acea9be4	increase automatic refresh to 5 minutes	2025-04-23 18:59:34 +03:00
calli	98b450fcc7	rearrange character layout and align tables to character image	2025-04-23 18:52:05 +03:00
calli	eb15696241	make account card clickable for easier collapse action	2025-04-23 17:59:50 +03:00
calli	741b2480b9	add account level statistics	2025-04-23 17:41:09 +03:00
calli	b185e5d044	hide extraction simulation for planets without extractors	2025-04-23 15:23:57 +03:00
calli	f0d4708b43	show extraction tooltip only if we have extractors	2025-04-23 15:23:32 +03:00
calli	0f33a7ff0c	Move activity level local storage read to useState	2025-04-23 15:18:32 +03:00
calli	bbdcece163	Show imports per planet	2025-04-23 15:15:26 +03:00
calli	2a1e74ca79	Remove sentry tunnel routing	2025-04-23 15:14:59 +03:00
calli	0e141321b6	add realized production to totals and settings for comparing it to estimates	2025-04-23 12:31:43 +03:00
calli	d433f5420e	Update luxon dependecy	2025-04-23 12:31:19 +03:00
calli	fa5f79068f	Refactor compact view planet card to be more compact and show extraction estimates	2025-04-23 11:35:22 +03:00
calli	c07dba3afc	Fix extraction amounts to use correct extractors	2025-04-23 11:33:08 +03:00
calli	a871bac35f	Move extraction details expand to row click	2025-04-23 11:32:44 +03:00
calli	eca35f51ac	Use nextjs Image instead of html img	2025-04-23 11:32:19 +03:00
calli	9e9ab359ec	Add a cell to table header to even it out	2025-04-23 11:31:51 +03:00
calli	1fc0efd3da	Add mass collapse and expand	2025-04-23 11:30:59 +03:00
calli	00a06a9681	add off-balance alert treshold to settings	2025-04-22 18:08:53 +03:00
calli	ac56adbcbe	Add singleplanet P2 blance alert	2025-04-22 18:03:17 +03:00
calli	a738dc4a22	add planet extraction simulation to tooltip	2025-04-22 17:53:51 +03:00
calli	efc28f7e36	move exclusion directly to planet list and add more info to simulation	2025-04-22 17:35:16 +03:00
calli	42f95c17de	refactor types and add account level totals	2025-04-22 12:53:42 +03:00
calli	8809fec6e0	Improve characters handling and add a collapse to account cards for easier sorting	2025-04-22 12:08:10 +03:00
calli	70fdc4e96f	Make account cards draggable and persist order in local storage	2025-04-22 11:50:47 +03:00
calli	09d587c8b0	instead of build lets use an image	2025-04-09 20:51:17 +03:00