Improve editor totals and formatting

src/frontend/components/circuit-tree-editor.tsx

@@ -2636,10 +2636,17 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                 <strong>{device.displayName || device.name}</strong>
                 <span>Name: {device.name}</span>
                 <span>Phasenart: {formatPhaseTypeLabel(device.phaseType)}</span>
-                <span>Anzahl: {device.quantity}</span>
-                <span>Leistung/Gerät: {device.powerPerUnit}</span>
-                <span>Gleichzeitigkeit: {device.simultaneityFactor}</span>
-                <span>Gesamtleistung: {device.totalPower}</span>
+                <span>Anzahl: {formatValue(device.quantity, "quantity")}</span>
+                <span>
+                  Leistung/Gerät: {formatValue(device.powerPerUnit, "powerPerUnit")} kW
+                </span>
+                <span>
+                  Gleichzeitigkeit:{" "}
+                  {formatValue(device.simultaneityFactor, "simultaneityFactor")}
+                </span>
+                <span>
+                  Gesamtleistung: {formatValue(device.totalPower, "rowTotalPower")} kW
+                </span>
                 <span>Kostengruppe: {device.costGroup || "-"}</span>
                 <span>Kategorie: {device.category || "-"}</span>
               </button>
@@ -3385,7 +3392,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                             }}
                           />
                         ) : (
-                          formatValue(cell.value)
+                          formatValue(cell.value, column.key)
                         )}
                       </td>
                     );

src/frontend/components/circuit-tree-preview.tsx

@@ -4,16 +4,7 @@ import { useEffect, useState } from "react";
 import { Fragment } from "react";
 import { getCircuitTree } from "../utils/api";
 import type { CircuitTreeCircuitDto, CircuitTreeResponseDto } from "../types";
-
-function formatNumber(value: number | undefined, digits = 2) {
-  if (value === undefined || Number.isNaN(value)) {
-    return "-";
-  }
-  return new Intl.NumberFormat("de-DE", {
-    minimumFractionDigits: digits,
-    maximumFractionDigits: digits,
-  }).format(value);
-}
+import { formatValue } from "../utils/circuit-grid-model";
 
 function formatPhaseType(value: string | undefined) {
   if (value === "three_phase") {
@@ -86,11 +77,10 @@ export function CircuitTreePreview(props: { projectId: string; circuitListId: st
                 <th>Raumnummer</th>
                 <th>Raumname</th>
                 <th className="text-end">Anzahl</th>
-                <th className="text-end">Leistung / Gerät</th>
+                <th className="text-end">Leistung / Gerät [kW]</th>
                 <th className="text-end">Gleichzeitigkeit</th>
                 <th className="text-end">cos φ</th>
-                <th className="text-end">Zeilensumme</th>
-                <th className="text-end">Stromkreissumme</th>
+                <th className="text-end">Gesamtsumme [kW]</th>
                 <th>Schutzart</th>
                 <th className="text-end">Bemessungsstrom</th>
                 <th>Charakteristik</th>
@@ -117,7 +107,7 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
   return (
     <>
       <tr className="section-row">
-        <td colSpan={22}>
+        <td colSpan={21}>
           <strong>{section.displayName}</strong>
         </td>
       </tr>
@@ -127,14 +117,18 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
             <tr key={circuit.id} className="reserve-row">
               <td>{circuit.equipmentIdentifier}</td>
               <td>{circuit.displayName?.trim() || "Reserve"}</td>
-              <td colSpan={12}>-</td>
-              <td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
+              <td colSpan={11}>-</td>
+              <td className="text-end">
+                {formatValue(circuit.circuitTotalPower, "circuitTotalPower")}
+              </td>
               <td>{circuit.protectionType ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
+              <td className="text-end">
+                {formatValue(circuit.protectionRatedCurrent, "protectionRatedCurrent")}
+              </td>
               <td>{circuit.protectionCharacteristic ?? "-"}</td>
               <td>{circuit.cableType ?? "-"}</td>
               <td>{circuit.cableCrossSection ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.cableLength)}</td>
+              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
               <td>{circuit.remark ?? "-"}</td>
             </tr>
           );
@@ -153,18 +147,21 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
               <td>{row.level ?? "-"}</td>
               <td>{row.roomNumberSnapshot ?? "-"}</td>
               <td>{row.roomNameSnapshot ?? "-"}</td>
-              <td className="text-end">{formatNumber(row.quantity, 0)}</td>
-              <td className="text-end">{formatNumber(row.powerPerUnit)}</td>
-              <td className="text-end">{formatNumber(row.simultaneityFactor)}</td>
-              <td className="text-end">{formatNumber(row.cosPhi)}</td>
-              <td className="text-end">{formatNumber(row.rowTotalPower)}</td>
-              <td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
+              <td className="text-end">{formatValue(row.quantity, "quantity")}</td>
+              <td className="text-end">{formatValue(row.powerPerUnit, "powerPerUnit")}</td>
+              <td className="text-end">
+                {formatValue(row.simultaneityFactor, "simultaneityFactor")}
+              </td>
+              <td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
+              <td className="text-end">{formatValue(row.rowTotalPower, "rowTotalPower")}</td>
               <td>{circuit.protectionType ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
+              <td className="text-end">
+                {formatValue(circuit.protectionRatedCurrent, "protectionRatedCurrent")}
+              </td>
               <td>{circuit.protectionCharacteristic ?? "-"}</td>
               <td>{circuit.cableType ?? "-"}</td>
               <td>{circuit.cableCrossSection ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.cableLength)}</td>
+              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
               <td>{row.remark ?? circuit.remark ?? "-"}</td>
             </tr>
           );
@@ -175,14 +172,18 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
             <tr key={`${circuit.id}-summary`} className="summary-row">
               <td>{circuit.equipmentIdentifier}</td>
               <td>{renderCircuitSummaryLabel(circuit)}</td>
-              <td colSpan={12}>-</td>
-              <td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
+              <td colSpan={11}>-</td>
+              <td className="text-end">
+                {formatValue(circuit.circuitTotalPower, "circuitTotalPower")}
+              </td>
               <td>{circuit.protectionType ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
+              <td className="text-end">
+                {formatValue(circuit.protectionRatedCurrent, "protectionRatedCurrent")}
+              </td>
               <td>{circuit.protectionCharacteristic ?? "-"}</td>
               <td>{circuit.cableType ?? "-"}</td>
               <td>{circuit.cableCrossSection ?? "-"}</td>
-              <td className="text-end">{formatNumber(circuit.cableLength)}</td>
+              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
               <td>{circuit.remark ?? "-"}</td>
             </tr>
             {circuit.deviceRows.map((row) => (
@@ -196,12 +197,13 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
                 <td>{row.level ?? "-"}</td>
                 <td>{row.roomNumberSnapshot ?? "-"}</td>
                 <td>{row.roomNameSnapshot ?? "-"}</td>
-                <td className="text-end">{formatNumber(row.quantity, 0)}</td>
-                <td className="text-end">{formatNumber(row.powerPerUnit)}</td>
-                <td className="text-end">{formatNumber(row.simultaneityFactor)}</td>
-                <td className="text-end">{formatNumber(row.cosPhi)}</td>
-                <td className="text-end">{formatNumber(row.rowTotalPower)}</td>
-                <td className="text-end">-</td>
+                <td className="text-end">{formatValue(row.quantity, "quantity")}</td>
+                <td className="text-end">{formatValue(row.powerPerUnit, "powerPerUnit")}</td>
+                <td className="text-end">
+                  {formatValue(row.simultaneityFactor, "simultaneityFactor")}
+                </td>
+                <td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
+                <td className="text-end">{formatValue(row.rowTotalPower, "rowTotalPower")}</td>
                 <td>-</td>
                 <td className="text-end">-</td>
                 <td>-</td>
@@ -216,7 +218,7 @@ function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number
       })}
       <tr className="placeholder-row">
         <td>-frei-</td>
-        <td colSpan={21}>Freie Zeile</td>
+        <td colSpan={20}>Freie Zeile</td>
       </tr>
     </>
   );