Added distributionboards

README.md

@@ -7,12 +7,15 @@ TypeScript backend for electrical power-balance planning.
 1. `npm install`
 2. `npm run db:generate`
 3. `npm run db:migrate`
-4. `npm run dev`
+4. `npm run dev:api`
+5. `npm run dev:web`
 
 ## Commands
 
-- `npm run dev`: Start API server
+- `npm run dev:api`: Start API server on port 3000
-- `npm run build`: TypeScript build
+- `npm run dev:web`: Start Next.js frontend on port 3001
+- `npm run build:api`: TypeScript backend build
+- `npm run build:web`: Next.js frontend build
 - `npm run test`: Calculation tests
 - `npm run db:generate`: Generate migrations
 - `npm run db:migrate`: Apply migrations
@@ -22,6 +25,7 @@ TypeScript backend for electrical power-balance planning.
 - `GET /health`
 - `GET /api/projects`
 - `POST /api/projects`
+- `GET /api/projects/:projectId/distribution-boards`
+- `POST /api/projects/:projectId/distribution-boards`
 - `GET /api/consumers/projects/:projectId`
 - `POST /api/consumers`
-

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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>