Add distribution power summaries

src/app/globals.css

@@ -116,6 +116,39 @@ body {
   font-weight: 600;
 }
 
+.distribution-power-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(12rem, 1fr));
+  gap: 0.5rem;
+  padding: 0.55rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 5px;
+  background: #f8fafc;
+}
+
+.distribution-power-summary > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.distribution-power-summary span {
+  color: #475569;
+  font-size: 0.74rem;
+  line-height: 1.2;
+}
+
+.distribution-power-summary strong {
+  color: #172033;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 900px) {
+  .distribution-power-summary {
+    grid-template-columns: 1fr;
+  }
+}
+
 .column-settings-menu {
   position: absolute;
   z-index: 9;
@@ -695,6 +728,18 @@ body {
   outline-offset: -2px;
 }
 
+.tree-grid .section-title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.tree-grid .section-title span {
+  color: #475569;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
 .tree-grid .cell-invalid {
   outline: 2px solid #c2410c;
   outline-offset: -2px;

src/app/projects/[projectId]/page.tsx

@@ -87,6 +87,10 @@ export default function ProjectDetailPage() {
   const [editingBoardFloorId, setEditingBoardFloorId] = useState("");
   const [editingBoardSupplyType, setEditingBoardSupplyType] =
     useState<DistributionBoardSupplyType>("AV");
+  const [
+    editingBoardSimultaneityFactor,
+    setEditingBoardSimultaneityFactor,
+  ] = useState("1");
   const [floorName, setFloorName] = useState("");
   const [roomNumber, setRoomNumber] = useState("");
   const [roomName, setRoomName] = useState("");
@@ -398,6 +402,9 @@ export default function ProjectDetailPage() {
         project?.enabledDistributionBoardSupplyTypes[0] ??
         "AV"
     );
+    setEditingBoardSimultaneityFactor(
+      String(board.simultaneityFactor)
+    );
   }
 
   function openBoardCreator() {
@@ -412,6 +419,17 @@ export default function ProjectDetailPage() {
     if (!projectId || !project || !editingBoard) {
       return;
     }
+    const simultaneityFactor = Number(
+      editingBoardSimultaneityFactor
+    );
+    if (
+      !editingBoardSimultaneityFactor.trim() ||
+      !Number.isFinite(simultaneityFactor) ||
+      simultaneityFactor < 0 ||
+      simultaneityFactor > 1
+    ) {
+      return;
+    }
     setIsSaving(true);
     setError(null);
     try {
@@ -421,6 +439,7 @@ export default function ProjectDetailPage() {
         {
           floorId: editingBoardFloorId || null,
           supplyType: editingBoardSupplyType,
+          simultaneityFactor,
         },
         project.currentRevision
       );
@@ -702,6 +721,7 @@ export default function ProjectDetailPage() {
                     <th>Verteilung</th>
                     <th>Etage</th>
                     <th>Netzart</th>
+                    <th>GZF</th>
                     <th className="text-end">Aktionen</th>
                   </tr>
                 </thead>
@@ -723,6 +743,15 @@ export default function ProjectDetailPage() {
                               ]
                             : "Nicht festgelegt"}
                         </td>
+                        <td>
+                          {board.simultaneityFactor.toLocaleString(
+                            "de-DE",
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
+                        </td>
                         <td className="text-end">
                           <div className="d-inline-flex flex-wrap justify-content-end gap-2">
                             <button
@@ -752,7 +781,7 @@ export default function ProjectDetailPage() {
                   })}
                   {!boards.length ? (
                     <tr>
-                      <td colSpan={4} className="text-center text-secondary py-4">
+                      <td colSpan={5} className="text-center text-secondary py-4">
                         Noch keine Verteilungen vorhanden.
                       </td>
                     </tr>
@@ -1131,10 +1160,18 @@ export default function ProjectDetailPage() {
 
       {editingBoard ? (
         <FormModal
-          description={`${editingBoard.name}: Etagenzuordnung und Netzart ändern.`}
+          description={`${editingBoard.name}: Etagenzuordnung, Netzart und Gleichzeitigkeitsfaktor ändern.`}
           isSaving={isSaving}
           onClose={() => setEditingBoard(null)}
           onSubmit={handleUpdateBoard}
+          submitDisabled={
+            !editingBoardSimultaneityFactor.trim() ||
+            !Number.isFinite(
+              Number(editingBoardSimultaneityFactor)
+            ) ||
+            Number(editingBoardSimultaneityFactor) < 0 ||
+            Number(editingBoardSimultaneityFactor) > 1
+          }
           submitLabel="Änderungen speichern"
           title="Verteilung bearbeiten"
         >
@@ -1187,6 +1224,32 @@ export default function ProjectDetailPage() {
                   ))}
               </select>
             </div>
+            <div className="col-12 col-md-6">
+              <label
+                className="form-label"
+                htmlFor="edit-distribution-board-simultaneity-factor"
+              >
+                Verteilerweiter Gleichzeitigkeitsfaktor
+              </label>
+              <input
+                className="form-control"
+                id="edit-distribution-board-simultaneity-factor"
+                max="1"
+                min="0"
+                onChange={(event) =>
+                  setEditingBoardSimultaneityFactor(
+                    event.target.value
+                  )
+                }
+                required
+                step="0.01"
+                type="number"
+                value={editingBoardSimultaneityFactor}
+              />
+              <div className="form-text">
+                Wird auf die Gesamtleistung des Verteilers angewendet.
+              </div>
+            </div>
           </div>
         </FormModal>
       ) : null}