Integrate print view and document branding

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

@@ -95,6 +95,13 @@ import {
   type DistributionBoardSupplyType,
 } from "../../../shared/constants/distribution-board";
 import { ProjectVersionHistory } from "../../../frontend/components/project-version-history";
+import {
+  DistributionBoardInfoCard,
+  fromDistributionBoardInfoDraft,
+  toDistributionBoardInfoDraft,
+  type DistributionBoardInfoDraft,
+} from "../../../frontend/components/distribution-board-info-card";
+import { Printer } from "lucide-react";
 import {
   ProjectSettingsModal,
   type ProjectSettingsInput,
@@ -165,6 +172,15 @@ export default function ProjectDetailPage() {
     setEditingBoardSimultaneityFactor,
   ] = useState("1");
   const [editingBoardCopyName, setEditingBoardCopyName] = useState("");
+  const [editingBoardInfo, setEditingBoardInfo] =
+    useState<DistributionBoardInfoDraft>(
+      toDistributionBoardInfoDraft({
+        boardNumber: null,
+        location: null,
+        fedFrom: null,
+        remark: null,
+      })
+    );
   const [floorName, setFloorName] = useState("");
   const [editingFloor, setEditingFloor] = useState<FloorDto | null>(null);
   const [editingRoom, setEditingRoom] = useState<RoomDto | null>(null);
@@ -542,6 +558,7 @@ export default function ProjectDetailPage() {
       String(board.simultaneityFactor)
     );
     setEditingBoardCopyName(`${board.name} Kopie`);
+    setEditingBoardInfo(toDistributionBoardInfoDraft(board));
   }
 
   function openBoardCreator() {
@@ -577,6 +594,7 @@ export default function ProjectDetailPage() {
           floorId: editingBoardFloorId || null,
           supplyType: editingBoardSupplyType,
           simultaneityFactor,
+          ...fromDistributionBoardInfoDraft(editingBoardInfo),
         },
         project.currentRevision
       );
@@ -967,6 +985,14 @@ export default function ProjectDetailPage() {
           </p>
         </div>
         <div className="d-flex gap-2">
+          <Link
+            className="btn btn-primary d-inline-flex align-items-center gap-2"
+            href={`/projects/${projectId}/print`}
+            target="_blank"
+          >
+            <Printer aria-hidden="true" size={16} />
+            Seitenansicht
+          </Link>
           <button
             className="btn btn-outline-primary btn-with-icon"
             disabled={!project}
@@ -1084,7 +1110,9 @@ export default function ProjectDetailPage() {
               <table className="table table-hover align-middle mb-0">
                 <thead>
                   <tr>
+                    <th>Nr.</th>
                     <th>Verteilung</th>
+                    <th>Örtlichkeit</th>
                     <th>Etage</th>
                     <th>Netzart</th>
                     <th>GZF</th>
@@ -1096,7 +1124,11 @@ export default function ProjectDetailPage() {
                     const circuitList = circuitListByBoardId.get(board.id);
                     return (
                       <tr key={board.id}>
+                        <td className="fw-semibold">
+                          {board.boardNumber ?? "–"}
+                        </td>
                         <td>{board.name}</td>
+                        <td>{board.location ?? "–"}</td>
                         <td>
                           {board.floorId
                             ? floorById.get(board.floorId)?.name ?? "Unbekannt"
@@ -1146,7 +1178,7 @@ export default function ProjectDetailPage() {
                   })}
                   {!boards.length ? (
                     <tr>
-                      <td colSpan={5} className="text-center text-secondary py-4">
+                      <td colSpan={7} className="text-center text-secondary py-4">
                         Noch keine Verteilungen vorhanden.
                       </td>
                     </tr>
@@ -1663,6 +1695,12 @@ export default function ProjectDetailPage() {
               </div>
             </div>
           </div>
+          <div className="mt-4">
+            <DistributionBoardInfoCard
+              draft={editingBoardInfo}
+              onChange={setEditingBoardInfo}
+            />
+          </div>
           <hr className="my-4" />
           <section aria-labelledby="copy-distribution-board-heading">
             <h3