Improve editor totals and formatting

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>
     </>
   );