add import tooltip to show import spesifics

This commit is contained in:
calli
2025-04-30 17:30:36 +03:00
parent 370400ce99
commit e085fcd59b

View File

@@ -358,21 +358,27 @@ export const PlanetTableRow = ({
const remainingAmount = Math.max(0, totalAmount - (consumptionPerHour * hoursSinceUpdate)); const remainingAmount = Math.max(0, totalAmount - (consumptionPerHour * hoursSinceUpdate));
const hoursUntilDepletion = consumptionPerHour > 0 ? remainingAmount / consumptionPerHour : 0; const hoursUntilDepletion = consumptionPerHour > 0 ? remainingAmount / consumptionPerHour : 0;
// Calculate monthly cost
const price = piPrices?.appraisal.items.find((a) => a.typeID === i.type_id)?.prices.sell.min ?? 0;
const monthlyCost = (consumptionPerHour * 24 * 30 * price) / 1000000; // Cost in millions
return ( return (
<div <div
key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`} key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
style={{ display: "flex", alignItems: "center" }} style={{ display: "flex", alignItems: "center" }}
> >
{renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
{totalAmount > 0 && (
<Tooltip title={ <Tooltip title={
<> <>
<div>Total in storage: {totalAmount.toFixed(1)} units</div> <div>Total in storage: {totalAmount.toFixed(1)} units</div>
<div>Consumption rate: {consumptionPerHour.toFixed(1)} units/hour</div> <div>Consumption rate: {consumptionPerHour.toFixed(1)} units/hour</div>
<div>Last update: {lastUpdate.toFormat('yyyy-MM-dd HH:mm:ss')}</div> <div>Last update: {lastUpdate.toFormat('yyyy-MM-dd HH:mm:ss')}</div>
<div>Will be depleted in {hoursUntilDepletion.toFixed(1)} hours</div> <div>Will be depleted in {hoursUntilDepletion.toFixed(1)} hours</div>
<div>Monthly cost: {monthlyCost.toFixed(2)}M ISK</div>
</> </>
}> }>
<div style={{ display: "flex", alignItems: "center" }}>
{renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
{totalAmount > 0 && (
<Typography <Typography
fontSize={theme.custom.smallText} fontSize={theme.custom.smallText}
color={hoursUntilDepletion < 24 ? 'error' : hoursUntilDepletion < 48 ? 'warning' : 'success'} color={hoursUntilDepletion < 24 ? 'error' : hoursUntilDepletion < 48 ? 'warning' : 'success'}
@@ -380,9 +386,10 @@ export const PlanetTableRow = ({
> >
({hoursUntilDepletion.toFixed(1)}h) ({hoursUntilDepletion.toFixed(1)}h)
</Typography> </Typography>
</Tooltip>
)} )}
</div> </div>
</Tooltip>
</div>
); );
})} })}
</div> </div>