Added distributionboards

src/app/globals.css

@@ -116,19 +116,21 @@ h2 {
 
 .toolbarBand {
   display: grid;
-  grid-template-columns: minmax(360px, 1.25fr) minmax(320px, 1fr);
+  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(320px, 0.9fr);
   gap: 14px;
   padding: 14px;
 }
 
 .projectForm,
+.boardForm,
 .consumerForm {
   display: grid;
   gap: 10px;
   align-items: end;
 }
 
-.projectForm {
+.projectForm,
+.boardForm {
   grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
 }
 
@@ -195,6 +197,12 @@ select {
   margin-bottom: 12px;
 }
 
+.subline {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
 .statusPill,
 .nameCell {
   display: inline-flex;
@@ -248,6 +256,7 @@ tbody tr:hover {
 @media (max-width: 1180px) {
   .toolbarBand,
   .projectForm,
+  .boardForm,
   .consumerForm {
     grid-template-columns: 1fr 1fr;
   }
@@ -272,6 +281,7 @@ tbody tr:hover {
 
   .toolbarBand,
   .projectForm,
+  .boardForm,
   .consumerForm,
   .summaryStrip {
     grid-template-columns: 1fr;

src/frontend/components/power-balance-workspace.tsx

@@ -63,6 +63,7 @@ export function PowerBalanceWorkspace() {
 
   const selectedProject = projects.find((project) => project.id === selectedProjectId);
   const selectedBoard = distributionBoards.find((board) => board.id === selectedBoardId);
+  const boardNames = new Map(distributionBoards.map((board) => [board.id, board.name]));
   const visibleConsumers = selectedBoardId
     ? consumers.filter((consumer) => consumer.distributionBoardId === selectedBoardId)
     : consumers;
@@ -343,6 +344,7 @@ export function PowerBalanceWorkspace() {
             <thead>
               <tr>
                 <th>Verbraucher</th>
+                <th>Verteilung</th>
                 <th>Kategorie</th>
                 <th>Anzahl</th>
                 <th>Leistung je Stück [kW]</th>
@@ -360,6 +362,7 @@ export function PowerBalanceWorkspace() {
                     <Zap size={15} />
                     {consumer.name}
                   </td>
+                  <td>{consumer.distributionBoardId ? boardNames.get(consumer.distributionBoardId) || "-" : "-"}</td>
                   <td>{consumer.category || "-"}</td>
                   <td>{consumer.quantity}</td>
                   <td>{formatNumber(consumer.installedPowerPerUnitKw)}</td>
@@ -372,7 +375,7 @@ export function PowerBalanceWorkspace() {
               ))}
               {!visibleConsumers.length ? (
                 <tr>
-                  <td colSpan={9} className="emptyState">
+                  <td colSpan={10} className="emptyState">
                     Lege eine Verteilung an oder erfasse den ersten Verbraucher.
                   </td>
                 </tr>