Website

frontend/src/components/JobSheetTemplate.tsx

@@ -164,6 +164,7 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
           "min-h-[120px] w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 flex items-center justify-center text-xs text-gray-500 break-inside-avoid mb-3",
           className,
         ].join(" ")}
+        style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
       >
         No photo selected
       </div>
@@ -175,6 +176,7 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
         "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3",
         className,
       ].join(" ")}
+      style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
     >
       <img
         src={url}

frontend/src/pages/PrintReportPage.tsx

@@ -1,11 +1,153 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { request } from "../lib/api";
-import { BASE_W } from "../lib/report";
+import { BASE_W, getPhotosForPage, getSelectedPhotos } from "../lib/report";
 import { getSessionId } from "../lib/session";
-import type { Page, Session } from "../types/session";
-import { ReportPageCanvas } from "../components/ReportPageCanvas";
+import type { FileMeta, Page, PageItem, Session, TemplateFields } from "../types/session";
+import { JobSheetTemplate } from "../components/JobSheetTemplate";
+
+const PHOTOS_PER_SHEET = 6;
+
+type PrintSheet = {
+  pageIndex: number;
+  sheetIndex: number;
+  page: Page;
+  photos: FileMeta[];
+  variant: "full" | "photos";
+};
+
+function hasTemplateContent(template?: TemplateFields) {
+  if (!template) return false;
+  return Object.values(template).some((value) => {
+    if (typeof value === "string") return value.trim().length > 0;
+    return value != null;
+  });
+}
+
+function resolvePagePhotos(
+  session: Session | null,
+  page: Page | null | undefined,
+  pageIndex: number,
+): FileMeta[] {
+  if (!session) return [];
+  const uploads = session.uploads?.photos ?? [];
+  const byId = new Map(uploads.map((photo) => [photo.id, photo]));
+  const explicit = page?.photo_ids ?? [];
+  if (explicit.length) {
+    return explicit.map((id) => byId.get(id)).filter(Boolean) as FileMeta[];
+  }
+  return getPhotosForPage(session, pageIndex, 1);
+}
+
+function chunkPhotos(photos: FileMeta[], perSheet: number) {
+  if (!photos.length) return [[]];
+  const slices: FileMeta[][] = [];
+  for (let i = 0; i < photos.length; i += perSheet) {
+    slices.push(photos.slice(i, i + perSheet));
+  }
+  return slices;
+}
+
+function buildPrintSheets(pages: Page[], session: Session | null): PrintSheet[] {
+  const sheets: PrintSheet[] = [];
+  pages.forEach((page, pageIndex) => {
+    const photos = resolvePagePhotos(session, page, pageIndex);
+    const hasItems = (page?.items?.length ?? 0) > 0;
+    const hasTemplate = hasTemplateContent(page?.template);
+    const hasPhotos = photos.length > 0;
+    if (!hasItems && !hasTemplate && !hasPhotos) return;
+
+    if (!hasPhotos) {
+      sheets.push({
+        pageIndex,
+        sheetIndex: 0,
+        page,
+        photos: [],
+        variant: "full",
+      });
+      return;
+    }
+
+    const photoSheets = chunkPhotos(photos, PHOTOS_PER_SHEET);
+    photoSheets.forEach((chunk, sheetIndex) => {
+      sheets.push({
+        pageIndex,
+        sheetIndex,
+        page,
+        photos: chunk,
+        variant: sheetIndex === 0 ? "full" : "photos",
+      });
+    });
+  });
+  return sheets;
+}
+
+function renderItems(items: PageItem[], scale: number) {
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  return items
+    .slice()
+    .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
+    .map((item) => {
+      const itemStyle: CSSProperties = {
+        position: "absolute",
+        left: `${item.x * safeScale}px`,
+        top: `${item.y * safeScale}px`,
+        width: `${item.w * safeScale}px`,
+        height: `${item.h * safeScale}px`,
+        zIndex: item.z ?? 0,
+      };
+
+      if (item.type === "text") {
+        return (
+          <div key={item.id} style={itemStyle}>
+            <div
+              className="w-full h-full p-2 overflow-hidden"
+              style={{
+                whiteSpace: "pre-wrap",
+                fontSize: `${(item.style?.fontSize ?? 14) * safeScale}px`,
+                fontWeight: item.style?.bold ? 700 : 400,
+                fontStyle: item.style?.italic ? "italic" : "normal",
+                textDecoration: item.style?.underline ? "underline" : "none",
+                color: item.style?.color ?? "#111827",
+                textAlign: item.style?.align ?? "left",
+              }}
+            >
+              {item.content ?? ""}
+            </div>
+          </div>
+        );
+      }
+
+      if (item.type === "image") {
+        return (
+          <div key={item.id} style={itemStyle}>
+            <img
+              src={item.src}
+              alt={item.name ?? "Image"}
+              className="w-full h-full object-contain bg-white"
+              loading="eager"
+            />
+          </div>
+        );
+      }
+
+      return (
+        <div key={item.id} style={itemStyle}>
+          <div
+            className="w-full h-full"
+            style={{
+              background: item.style?.fill ?? "#ffffff",
+              borderStyle: "solid",
+              borderColor: item.style?.stroke ?? "#111827",
+              borderWidth: `${(item.style?.strokeWidth ?? 1) * safeScale}px`,
+            }}
+          />
+        </div>
+      );
+    });
+}
 
 export default function PrintReportPage() {
   const [searchParams] = useSearchParams();
@@ -16,12 +158,14 @@ export default function PrintReportPage() {
   const [scale, setScale] = useState(1);
   const [hasMeasured, setHasMeasured] = useState(false);
   const [error, setError] = useState("");
+  const [loaded, setLoaded] = useState(false);
 
   const pageRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!sessionId) {
       setError("Missing session id.");
+      setLoaded(true);
       return;
     }
     async function load() {
@@ -36,6 +180,8 @@ export default function PrintReportPage() {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
         setError(message);
+      } finally {
+        setLoaded(true);
       }
     }
     load();
@@ -43,7 +189,11 @@ export default function PrintReportPage() {
 
   useEffect(() => {
     const updateScale = () => {
-      if (!pageRef.current) return;
+      if (!pageRef.current) {
+        setScale(1);
+        setHasMeasured(true);
+        return;
+      }
       const width = pageRef.current.clientWidth;
       if (width > 0) {
         setScale(width / BASE_W);
@@ -55,27 +205,34 @@ export default function PrintReportPage() {
     return () => window.removeEventListener("resize", updateScale);
   }, []);
 
-  const totalPages =
-    pages.length > 0 ? pages.length : Math.max(1, session?.page_count ?? 0);
+  const basePages = useMemo(() => {
+    if (pages.length) return pages;
+    if (!session) return [];
+    const selected = getSelectedPhotos(session);
+    const count = Math.max(1, selected.length || session.page_count || 1);
+    return Array.from({ length: count }, () => ({ items: [] as PageItem[] }));
+  }, [pages, session]);
 
-  const ready = Boolean(sessionId && !error && hasMeasured && (session || pages.length));
+  const totalPages = basePages.length || 1;
 
-  const pageList = useMemo(
-    () => Array.from({ length: totalPages }, (_, index) => index),
-    [totalPages],
+  const printSheets = useMemo(
+    () => buildPrintSheets(basePages, session),
+    [basePages, session],
   );
 
+  const ready = Boolean(sessionId && hasMeasured && loaded);
+
   return (
     <div
       data-print-ready={ready ? "true" : "false"}
       className="bg-white text-gray-900"
     >
       <style>{`
-        @page { size: A4; margin: 10mm; }
+        @page { size: A4; margin: 0; }
         @media print {
           html, body { background: #fff !important; margin: 0; }
         }
-        .print-page { width: 210mm; min-height: 297mm; break-after: page; }
+        .print-page { width: 210mm; min-height: 297mm; break-after: page; position: relative; }
         .print-page:last-child { break-after: auto; }
       `}</style>
 
@@ -83,23 +240,32 @@ export default function PrintReportPage() {
         <div className="p-6 text-sm text-red-600">{error}</div>
       ) : (
         <div className="flex flex-col items-center gap-6 py-6">
-          {pageList.map((index) => (
-            <div
-              key={`print-page-${index}`}
-              ref={index === 0 ? pageRef : undefined}
-              className="print-page"
-            >
-              <ReportPageCanvas
-                session={session}
-                page={pages[index] ?? { items: [] }}
-                pageIndex={index}
-                pageCount={totalPages}
-                scale={scale}
-                template={pages[index]?.template}
-                adaptive
-              />
+          {printSheets.length === 0 ? (
+            <div className="p-6 text-sm text-gray-600">
+              No printable content available.
             </div>
-          ))}
+          ) : (
+            printSheets.map((sheet, index) => (
+              <div
+                key={`print-page-${sheet.pageIndex}-${sheet.sheetIndex}`}
+                ref={index === 0 ? pageRef : undefined}
+                className="print-page"
+              >
+                <JobSheetTemplate
+                  session={session}
+                  pageIndex={sheet.pageIndex}
+                  pageCount={totalPages}
+                  template={sheet.page.template}
+                  photos={sheet.photos}
+                  orderLocked={sheet.page.photo_order_locked ?? false}
+                  variant={sheet.variant}
+                />
+                {sheet.sheetIndex === 0
+                  ? renderItems(sheet.page.items ?? [], scale)
+                  : null}
+              </div>
+            ))
+          )}
         </div>
       )}
     </div>

server/app/services/pdf_export.py

@@ -34,12 +34,7 @@ async def _render_pdf_async(session_id: str, output_path: Path) -> Path:
             format="A4",
             print_background=True,
             prefer_css_page_size=True,
-            margin={
-                "top": "10mm",
-                "right": "10mm",
-                "bottom": "10mm",
-                "left": "10mm",
-            },
+            margin={"top": "0mm", "right": "0mm", "bottom": "0mm", "left": "0mm"},
         )
 
         await context.close()