hoist calculations and alerts to accountCard level

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -4,18 +4,21 @@ import {
   AccessToken,
   PlanetWithInfo,
 } from "@/types";
+import { PlanetCalculations } from "@/types/planet";
 import React, { useContext } from "react";
 import { DateTime } from "luxon";
-import { EXTRACTOR_TYPE_IDS } from "@/const";
 import Countdown from "react-countdown";
-import { getProgramOutputPrediction } from "./ExtractionSimulation";
-import {
-  alertModeVisibility,
-  extractorsHaveExpired,
-  timeColor,
-} from "./alerts";
-import { ColorContext, SessionContext } from "@/app/context/Context";
+import { ColorContext } from "@/app/context/Context";
 import { ExtractionSimulationTooltip } from "./ExtractionSimulationTooltip";
+import { timeColor } from "./alerts";
+
+interface ExtractorConfig {
+  typeId: number;
+  baseValue: number;
+  cycleTime: number;
+  installTime: string;
+  expiryTime: string;
+}
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -29,82 +32,31 @@ const StackItem = styled(Stack)(({ theme }) => ({
 export const PlanetCard = ({
   character,
   planet,
+  planetDetails,
 }: {
   character: AccessToken;
   planet: PlanetWithInfo;
+  planetDetails: PlanetCalculations;
 }) => {
-  const { alertMode } = useContext(SessionContext);
-
-  const planetInfo = planet.info;
-  const planetInfoUniverse = planet.infoUniverse;
-
   const theme = useTheme();
-
-  const extractorsExpiryTime =
-    (planetInfo &&
-      planetInfo.pins
-        .filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
-        .map((p) => p.expiry_time)) ??
-    [];
-
   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
-    };
-  });
+  const extractorConfigs: ExtractorConfig[] = planetDetails.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 ?? ""
+    }));
 
   return (
     <Tooltip
       title={
-        extractors.length > 0 ? (
+        planetDetails.extractors.length > 0 ? (
           <ExtractionSimulationTooltip
-            extractors={extractors}
+            extractors={extractorConfigs}
           />
         ) : null
       }
@@ -121,14 +73,13 @@ export const PlanetCard = ({
         }
       }}
     >
-    <StackItem
-      alignItems="flex-start"
-      height="100%"
-      position="relative"
-      minHeight={theme.custom.cardMinHeight}
-      visibility={alertModeVisibility(alertMode, expired)}
-    >
-      
+      <StackItem
+        alignItems="flex-start"
+        height="100%"
+        position="relative"
+        minHeight={theme.custom.cardMinHeight}
+        style={{ visibility: planetDetails.visibility }}
+      >
         <div style={{ position: 'relative' }}>
           <Image
             unoptimized
@@ -153,55 +104,53 @@ export const PlanetCard = ({
             borderRadius: 8,
           }} />
         </div>
-     
-      {expired && (
-        <Image
-          width={32}
-          height={32}
-          src={`/stopped.png`}
-          alt=""
-          style={{ position: "absolute", top: theme.custom.stoppedPosition }}
-        />
-      )}
-      <div style={{ position: "absolute", top: 5, left: 10 }}>
-        <Typography fontSize={theme.custom.smallText}>
-          {planetInfoUniverse?.name}
-        </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>
-    </StackItem>
+        {planetDetails.expired && (
+          <Image
+            width={32}
+            height={32}
+            src={`/stopped.png`}
+            alt=""
+            style={{ position: "absolute", top: theme.custom.stoppedPosition }}
+          />
+        )}
+        <div style={{ position: "absolute", top: 5, left: 10 }}>
+          <Typography fontSize={theme.custom.smallText}>
+            {planet.infoUniverse?.name}
+          </Typography>
+          {planetDetails.extractors.map((e, idx) => {
+            const average = planetDetails.extractorAverages[idx];
+            return (
+              <div key={`${e}-${idx}-${character.character.characterId}`}>
+                <Typography
+                  color={timeColor(e.expiry_time, colors)}
+                  fontSize={theme.custom.smallText}
+                >
+                  {!planetDetails.expired && e.expiry_time && <Countdown
+                      overtime={true}
+                      date={DateTime.fromISO(e.expiry_time).toMillis()}
+                    />
+                  }
+                </Typography>
+                {!planetDetails.expired && e && average && (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    <Image
+                      unoptimized
+                      src={`https://images.evetech.net/types/${e.extractor_details?.product_type_id}/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>
+      </StackItem>
     </Tooltip>
   );
 };