diff --git a/web-frontend/src/components/Canvas/ExportReportModal.tsx b/web-frontend/src/components/Canvas/ExportReportModal.tsx index 9ca2e7a..ecfdeb6 100644 --- a/web-frontend/src/components/Canvas/ExportReportModal.tsx +++ b/web-frontend/src/components/Canvas/ExportReportModal.tsx @@ -22,10 +22,12 @@ import { TbFileSpreadsheet } from "react-icons/tb"; import * as XLSX from "xlsx"; import { useEditorStore } from "@/store/useEditorStore"; +import { getReportFooterHTML } from "@/utils/exportFooter"; interface ExportReportModalProps { editorId: string; open: boolean; + projectName?: string; onClose: () => void; } @@ -51,11 +53,16 @@ interface FormatOption { export const ExportReportModal: React.FC = ({ editorId, open, + projectName, onClose, }) => { const editorState = useEditorStore((s) => s.editors[editorId]); const [exportFormat, setExportFormat] = useState("csv"); + const createdBy = localStorage.getItem("username") || "Unknown User"; + const dateStr = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }); + const footerHTML = getReportFooterHTML(projectName || "Untitled Project", createdBy, dateStr); + // Transform editor items to report items const items = useMemo(() => { if (!editorState?.items) return []; @@ -242,9 +249,13 @@ export const ExportReportModal: React.FC = ({ .stat-item { text-align: center; } .stat-value { font-size: 24px; font-weight: bold; color: #4F46E5; } .stat-label { font-size: 12px; color: #666; } + /* Title block table must not inherit outer table styles */ + .title-block table { margin-top: 0; border-collapse: collapse; } + .title-block td { border: none !important; padding: 5px 0; } @media print { body { margin: 0; } .no-print { display: none; } + * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } @@ -264,11 +275,10 @@ export const ExportReportModal: React.FC = ({
Unique Types
-
${ - items.filter( - (i) => i.description && i.description !== "No description", - ).length - }
+
${items.filter( + (i) => i.description && i.description !== "No description", + ).length + }
With Description
@@ -284,8 +294,8 @@ export const ExportReportModal: React.FC = ({ ${items - .map( - (item) => ` + .map( + (item) => ` ${item.slNo} ${item.tagNo} @@ -293,10 +303,11 @@ export const ExportReportModal: React.FC = ({ ${item.description} `, - ) - .join("")} + ) + .join("")} + ${footerHTML}
Total Items: ${items.length}
@@ -362,6 +373,12 @@ export const ExportReportModal: React.FC = ({ th { background-color: #4F46E5; color: white; font-weight: 600; padding: 12px 10px; text-align: left; } td { padding: 10px; border-bottom: 1px solid #e5e7eb; } .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 9pt; } + /* Title block must not inherit outer table styles */ + .title-block table { margin-top: 0; border-collapse: collapse; } + .title-block td { border: none !important; padding: 5px 0; } + @media print { + * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } + } @@ -380,11 +397,10 @@ export const ExportReportModal: React.FC = ({
Equipment Types
-
${ - items.filter( - (i) => i.description && i.description !== "No description", - ).length - }
+
${items.filter( + (i) => i.description && i.description !== "No description", + ).length + }
Documented Items
@@ -404,8 +420,8 @@ export const ExportReportModal: React.FC = ({ ${items - .map( - (item) => ` + .map( + (item) => ` ${item.slNo} ${item.tagNo} @@ -413,11 +429,13 @@ export const ExportReportModal: React.FC = ({ ${item.description} `, - ) - .join("")} + ) + .join("")} + ${footerHTML} +

Report ID: EQ-${new Date().getTime().toString().slice(-6)} | Page 1 of 1

This is a system-generated report. For official use, please verify with the equipment database.

@@ -532,11 +550,10 @@ export const ExportReportModal: React.FC = ({ key={format.key} isHoverable isPressable - className={`cursor-pointer transition-all ${ - exportFormat === format.key + className={`cursor-pointer transition-all ${exportFormat === format.key ? `ring-2 ring-blue-500 ${format.color} border-2 ${format.borderColor}` : "" - }`} + }`} onPress={() => handleFormatSelect(format.key)} > diff --git a/web-frontend/src/pages/Editor.tsx b/web-frontend/src/pages/Editor.tsx index 9ec3d7a..1f53006 100644 --- a/web-frontend/src/pages/Editor.tsx +++ b/web-frontend/src/pages/Editor.tsx @@ -75,13 +75,7 @@ import { importFromDiagramFile, migrateExportData, } from "@/utils/diagramExport"; -// import { -// getProject, -// saveProject, -// createProject, -// type SavedProject, -// convertToBackendFormat, -// } from "@/utils/projectStorage"; +import { appendFooterToImage } from "@/utils/exportFooter"; import { createProject, fetchProject, @@ -603,7 +597,7 @@ export default function Editor() { tempStage.batchDraw(); // Generate data URL from temp stage - const dataUrl = tempStage.toDataURL({ + let dataUrl = tempStage.toDataURL({ pixelRatio, mimeType, quality, @@ -613,6 +607,13 @@ export default function Editor() { tempStage.destroy(); document.body.removeChild(tempContainer); + // Append Footer Block (mimicking PyQt title block) + const projectName = projectMetadata?.name || "Untitled Project"; + const createdBy = localStorage.getItem("username") || "Unknown User"; + const exportDate = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }); + + dataUrl = await appendFooterToImage(dataUrl, projectName, createdBy, exportDate, backgroundFill, pixelRatio); + /* ========================= PDF EXPORT - FIXED ========================= */ @@ -2354,8 +2355,9 @@ export default function Editor() { /> setShowReportModal(false)} /> diff --git a/web-frontend/src/utils/exportFooter.ts b/web-frontend/src/utils/exportFooter.ts new file mode 100644 index 0000000..c75f4df --- /dev/null +++ b/web-frontend/src/utils/exportFooter.ts @@ -0,0 +1,114 @@ +export async function appendFooterToImage( + dataUrl: string, + projectName: string, + createdBy: string, + date: string, + backgroundColor: string, + scale: number = 2 +): Promise { + return new Promise((resolve, reject) => { + const img = new Image(); + + img.onload = () => { + const canvas = document.createElement("canvas"); + const ctx = canvas.getContext("2d"); + + if (!ctx) { + return reject(new Error("Failed to get 2d context")); + } + + const blockWidth = Math.min(360 * scale, Math.max(250 * scale, img.width * 0.34)); + const blockHeight = 92 * scale; + const margin = 24 * scale; + + // Keep original image dimensions; draw footer inside the existing bounds + canvas.width = img.width; + canvas.height = img.height; + + // Fill background + ctx.fillStyle = backgroundColor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Draw original diagram image + ctx.drawImage(img, 0, 0); + + // Calculate position for the footer block (bottom-right of existing image bounds) + const x = canvas.width - blockWidth - margin; + const y = canvas.height - blockHeight - margin; + + // Draw footer block background and border + ctx.fillStyle = "#FFF8F2"; + ctx.strokeStyle = "#C97B5A"; + ctx.lineWidth = 1.5 * scale; + + // Rounded rectangle + ctx.beginPath(); + ctx.roundRect(x, y, blockWidth, blockHeight, 8 * scale); + ctx.fill(); + ctx.stroke(); + + // Text setup + ctx.fillStyle = "#6B4A3B"; + const labelFontSize = 11 * scale; + const valueFontSize = 12 * scale; + const lineGap = 24 * scale; + const textX = x + 16 * scale; + const labelY = y + 26 * scale; + + const rows = [ + { label: "Project Name:", value: projectName }, + { label: "Created By:", value: createdBy }, + { label: "Date:", value: date }, + ]; + + rows.forEach((row, index) => { + const rowY = labelY + index * lineGap; + + ctx.font = `bold ${labelFontSize}px sans-serif`; + ctx.fillText(row.label, textX, rowY); + + ctx.font = `normal ${valueFontSize}px sans-serif`; + ctx.fillText(row.value, textX + 110 * scale, rowY); + }); + + resolve(canvas.toDataURL("image/png", 1.0)); + }; + img.onerror = reject; + img.src = dataUrl; + }); +} + +export function getReportFooterHTML( + projectName: string, + createdBy: string, + date: string +): string { + return ` +
+ + + + + + + + + + + + + +
Project Name:${projectName}
Created By:${createdBy}
Date:${date}
+
+ `; +}