From 6d63bc737d64c93cd57c0d7089166430168ae8c6 Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Thu, 1 Oct 2026 13:05:54 +0200
Subject: [PATCH] fix(planning): show total construction cost per building row

Area and revenue in a production building row cover all buildings of
the row, construction cost covered only one (NPS feedback).

- construction stat shows per-building cost x amount
- tooltip with the single-building cost when amount > 1
- engine constructionCost stays per building (COGM, finance)
- en_US key plan.components.production_building.table.construction_per_building
- component test for the total and the tooltip

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/PlanProductionBuilding.vue     | 40 ++++++++++++++++++-
 src/locales/en_US/plan.json                   |  3 +-
 .../components/PlanProductionBuilding.test.ts | 37 ++++++++++++++++-
 3 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/features/planning/components/PlanProductionBuilding.vue b/src/features/planning/components/PlanProductionBuilding.vue
index ddcde80f7..9472ae3ff 100644
--- a/src/features/planning/components/PlanProductionBuilding.vue
+++ b/src/features/planning/components/PlanProductionBuilding.vue
@@ -84,6 +84,14 @@
 			(element) => element.efficiencyType === "COGC"
 		);
 	});
+
+	// area and revenue are for all buildings of this row, so is construction;
+	// the engine's constructionCost stays per building (COGM, finance)
+	const constructionCostTotal: ComputedRef<number> = computed(
+		() =>
+			localBuildingData.value.constructionCost *
+			localBuildingData.value.amount
+	);
 </script>
 
 <template>
@@ -231,8 +239,36 @@
 					}}
 				</span>
 				<span class="text-xs font-bold whitespace-nowrap">
-					{{ formatNumber(localBuildingData.constructionCost * -1) }}
-					<span class="font-light text-muted">ȼ</span>
+					<PTooltip :disabled="localBuildingData.amount <= 1">
+						<template #trigger>
+							<span
+								:class="{
+									'hover:cursor-help':
+										localBuildingData.amount > 1,
+								}">
+								{{ formatNumber(constructionCostTotal * -1) }}
+								<span class="font-light text-muted">ȼ</span>
+							</span>
+						</template>
+						<div
+							class="flex flex-row justify-between align-center gap-x-3 child:p-1">
+							<div>
+								{{
+									$t(
+										"plan.components.production_building.table.construction_per_building"
+									)
+								}}
+							</div>
+							<div>
+								{{
+									formatNumber(
+										localBuildingData.constructionCost * -1
+									)
+								}}
+								ȼ
+							</div>
+						</div>
+					</PTooltip>
 				</span>
 			</div>
 			<div class="flex justify-end">
diff --git a/src/locales/en_US/plan.json b/src/locales/en_US/plan.json
index 222b84875..243b650e9 100644
--- a/src/locales/en_US/plan.json
+++ b/src/locales/en_US/plan.json
@@ -308,7 +308,8 @@
 				"efficiency": "Efficiency",
 				"revenue": "@:terms.revenue",
 				"area": "@:terms.area",
-				"construction": "Construction"
+				"construction": "Construction",
+				"construction_per_building": "Per building"
 			},
 			"zero_reason": {
 				"FERTILITY": "Planet not fertile",
diff --git a/src/tests/features/planning/components/PlanProductionBuilding.test.ts b/src/tests/features/planning/components/PlanProductionBuilding.test.ts
index 8186d69a4..174116256 100644
--- a/src/tests/features/planning/components/PlanProductionBuilding.test.ts
+++ b/src/tests/features/planning/components/PlanProductionBuilding.test.ts
@@ -6,6 +6,7 @@ import PlanProductionBuilding from "@/features/planning/components/PlanProductio
 import PlanProductionRecipe from "@/features/planning/components/PlanProductionRecipe.vue";
 import PInputNumber from "@/ui/components/PInputNumber.vue";
 import PValue from "@/ui/components/PValue.vue";
+import PTooltip from "@/ui/components/PTooltip.vue";
 import { mountComponent } from "@/tests/mountComponent";
 
 // Types & Interfaces
@@ -82,6 +83,8 @@ function button(wrapper: VueWrapper, text: string) {
 }
 
 const ADD_RECIPE = "plan.components.production_building.buttons.add_recipe";
+const PER_BUILDING =
+	"plan.components.production_building.table.construction_per_building";
 
 describe("PlanProductionBuilding", () => {
 	it("shows amount, name and the building figures", async () => {
@@ -94,13 +97,43 @@ describe("PlanProductionBuilding", () => {
 		expect(text).toContain("133.75 %");
 		expect(text).toContain("2,500.00");
 		expect(text).toContain("105");
-		// construction cost shown negated
-		expect(text).toContain("-123,456.79");
+		// construction cost for all 3 buildings, shown negated
+		expect(text).toContain("-370,370.37");
 		expect(
 			wrapper.findComponent(PInputNumber).find("input").element.value
 		).toBe("3");
 	});
 
+	it("shows the single building construction cost in a tooltip", async () => {
+		// PTooltip observes its size, the test DOM has no ResizeObserver
+		vi.stubGlobal("ResizeObserver", class {
+			observe() {}
+			disconnect() {}
+		});
+		// efficiency comes first, construction last
+		const hover = (wrapper: VueWrapper) =>
+			wrapper
+				.findAllComponents(PTooltip)
+				.at(-1)!
+				.find("div")
+				.trigger("mouseenter");
+
+		const { wrapper } = await mountBuilding();
+		await hover(wrapper);
+		expect(document.body.textContent).toContain(PER_BUILDING);
+		expect(document.body.textContent).toContain("-123,456.79");
+		// unmounting removes the teleported tooltip
+		wrapper.unmount();
+
+		// one building: total and single cost are the same, no tooltip
+		const { wrapper: single } = await mountBuilding({
+			buildingData: building({ amount: 1 }),
+		});
+		expect(single.text()).toContain("-123,456.79");
+		await hover(single);
+		expect(document.body.textContent).not.toContain(PER_BUILDING);
+	});
+
 	it("marks the expertise positive with a COGC bonus", async () => {
 		const { wrapper, setProps } = await mountBuilding();
 		expect(expertise(wrapper).classes()).toContain("text-positive");