add toggle to show exact date time when extractors need a restart

src/app/components/MainGrid.tsx

@@ -49,7 +49,7 @@ declare module "@mui/material/styles" {
 
 export const MainGrid = () => {
   const { characters, updateCharacter } = useContext(CharacterContext);
-  const { compactMode, toggleCompactMode, alertMode, toggleAlertMode, planMode, togglePlanMode } = useContext(SessionContext);
+  const { compactMode, toggleCompactMode, alertMode, toggleAlertMode, planMode, togglePlanMode, extractionTimeMode, toggleExtractionTimeMode } = useContext(SessionContext);
   const [accountOrder, setAccountOrder] = useState<string[]>([]);
   const [allCollapsed, setAllCollapsed] = useState(false);
 
@@ -204,6 +204,19 @@ export const MainGrid = () => {
               Plan mode
             </Button>
           </Tooltip>
+          <Tooltip title="Toggle extraction time display mode">
+            <Button
+              size="small"
+              style={{
+                backgroundColor: extractionTimeMode
+                  ? "rgba(144, 202, 249, 0.08)"
+                  : "inherit",
+              }}
+              onClick={toggleExtractionTimeMode}
+            >
+              Extraction datetime
+            </Button>
+          </Tooltip>
         </Box>
         <DragDropContextComponent onDragEnd={handleDragEnd}>
           <DroppableComponent droppableId="accounts">

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -41,7 +41,7 @@ export const PlanetTableRow = ({
   character: AccessToken;
 }) => {
   const theme = useTheme();
-  const { showProductIcons } = useContext(SessionContext);
+  const { showProductIcons, extractionTimeMode } = useContext(SessionContext);
 
   const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
   const [planetConfigOpen, setPlanetConfigOpen] = useState(false);
@@ -285,10 +285,14 @@ export const PlanetTableRow = ({
                     paddingRight={1}
                   >
                     {e ? (
-                      <Countdown
+                      extractionTimeMode ? (
-                        overtime={true}
+                        DateTime.fromISO(e.expiry_time ?? "").toFormat('yyyy-MM-dd HH:mm:ss')
-                        date={DateTime.fromISO(e.expiry_time ?? "").toMillis()}
+                      ) : (
-                      />
+                        <Countdown
+                          overtime={true}
+                          date={DateTime.fromISO(e.expiry_time ?? "").toMillis()}
+                        />
+                      )
                     ) : (
                       "STOPPED"
                     )}

src/app/context/Context.tsx

@@ -26,6 +26,8 @@ export const SessionContext = createContext<{
   togglePlanMode: () => void;
   alertMode: boolean;
   toggleAlertMode: () => void;
+  extractionTimeMode: boolean;
+  toggleExtractionTimeMode: () => void;
   piPrices: EvePraisalResult | undefined;
   updatePlanetConfig: (config: PlanetConfig) => void;
   readPlanetConfig: ({
@@ -51,6 +53,8 @@ export const SessionContext = createContext<{
   togglePlanMode: () => {},
   alertMode: false,
   toggleAlertMode: () => {},
+  extractionTimeMode: false,
+  toggleExtractionTimeMode: () => {},
   piPrices: undefined,
   updatePlanetConfig: () => {},
   readPlanetConfig: ({

src/app/page.tsx

@@ -31,6 +31,7 @@ const Home = () => {
   );
   const [balanceThreshold, setBalanceThreshold] = useState(1000);
   const [showProductIcons, setShowProductIcons] = useState(false);
+  const [extractionTimeMode, setExtractionTimeMode] = useState(false);
 
   const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
   const [alertMode, setAlertMode] = useState(false);
@@ -149,6 +150,10 @@ const Home = () => {
     setAlertMode(!alertMode);
   };
 
+  const toggleExtractionTimeMode = () => {
+    setExtractionTimeMode(!extractionTimeMode);
+  };
+
   const updatePlanetConfig = (config: PlanetConfig) => {
     const charactersToSave = characters.map((c) => {
       if (c.character.characterId === config.characterId) {
@@ -224,6 +229,17 @@ const Home = () => {
     localStorage.setItem("colors", JSON.stringify(colors));
   }, [colors]);
 
+  useEffect(() => {
+    const savedMode = localStorage.getItem('extractionTimeMode');
+    if (savedMode) {
+      setExtractionTimeMode(savedMode === 'true');
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('extractionTimeMode', extractionTimeMode.toString());
+  }, [extractionTimeMode]);
+
   useEffect(() => {
     fetch("api/env")
       .then((r) => r.json())
@@ -275,6 +291,8 @@ const Home = () => {
         piPrices,
         alertMode,
         toggleAlertMode,
+        extractionTimeMode,
+        toggleExtractionTimeMode,
         updatePlanetConfig,
         readPlanetConfig,
         balanceThreshold,