QR Code is Null (FBR Digital Invoice)

4

Below is the Custom Themes code, already updated to follow the latest custom theme pattern. The result should still look similar to the default view without custom themes, except for the QR code display.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
        @page {
            size: A4;
            margin: 0mm; /* sesuaikan margin cetak di sini (5mm, 8mm, 10mm) */
        }
        
        :root { --bg: #f5f5f5; --paper: #fff; }
        
        body {
            background-color: var(--bg);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center; 
            font-size: 0.875rem; 
			line-height: 1.5rem; 
			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }
        
        main {
            background-color: var(--paper);
            margin: 5mm;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            box-shadow: 0px 4px 6px rgb(0 0 0 / 0.05);
            padding: 1rem 2rem 2rem 2rem;
            max-width: 210mm; 
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Hilangkan margin atas elemen pertama di dalam main */
        main > *:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        
        @media print {
            body {
                background: none;
                margin: 0;
                padding: 0;
                display: block; /* tidak perlu flex saat print */
            }
            main {
                margin: 0; /* margin diatur oleh @page, jadi di sini 0 */
                padding: 1rem 2rem 2rem 2rem; /* sama persis dengan padding layar */
                border: none;
                box-shadow: none;
                border-radius: 0;
                max-width: none;
                width: auto;
            }
        }
        
        /* style lainnya (address, dt, dd, table) tetap seperti milik Anda */
        address { font-style: normal; line-height: 1.5em; }
        dt { font-weight: bold; margin: 0 0 2px 0; }
        dd { margin: 0 0 8px 0; }
        dd:last-of-type { margin-bottom: 0; }
        table { font-size: 14px; width: 100%; }
        tr#table-headers th { font-weight: bold; padding: 5px 10px; border: 1px solid #000; text-align: start; }
        tbody#table-rows td { padding: 5px 10px; text-align: start; vertical-align: top; }
        tbody#table-rows tr.row td { border-left: 1px solid #000; border-right: 1px solid #000; }
        tbody#table-rows tr.last-row td { padding-bottom: 30px; border-bottom: 1px solid #000; }
        tbody#table-rows tr.column-total td { font-weight: bold; border: 1px solid #000; white-space: nowrap; text-align: right; }
        tbody#table-rows tr.total td { white-space: nowrap; }
        tbody#table-rows tr.total td:first-child { text-align: end; }
        tbody#table-rows tr.total td:last-child { border: 1px solid #000; text-align: right; }
    </style>
</head>
<body>
	<!-- MAIN LAYOUT TABLE - SAMA PERSIS DENGAN ASLI -->
	<main>
	<table>
		<thead>
			<tr>
				<td>
				
   				    <header style="display: flex; justify-content: space-between; align-items: flex-start;">
						<h1 id="title"></h1>
						<div id="business-logo" style="text-align: end"></div>
					</header>

					<section style="display: flex; margin-bottom: 20px; width: 100%; align-items: flex-start; gap: 20px">
						<address id="recipient-info" style="flex: 1"></address>
						<dl id="fields" style="flex: 1; text-align: end"></dl>
						<div aria-hidden="true" style="width: 1px; border-left: 1px solid #000; align-self: stretch "></div>
						<address id="business-info" style="white-space: nowrap"></address>
					</section>

					<p style="font-weight: bold; font-size: 14px; margin-bottom: 20px" id="description"></p>
				</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<table style="border-collapse: collapse; width: 100%">
						<thead><tr id="table-headers"></td></thead>
						<tbody id="table-rows"></tbody>
					</table>

					<div id="qrcode" style="margin-bottom: 20px"></div>
					<div id="custom-fields"></div>
					<div id="footers"></div>
					<div id="status" style="text-align: center"></div>
				</td>
			</tr>
		</tbody>
	</table>
</main>
	<script>
	
		// === HANYA PERUBAHAN DI SINI: FETCH DAN TRANSFORM DATA ===
		// Fungsi untuk mengubah data API menjadi format yang diharapkan oleh kode render asli
		function transformApiData(apiData) {
			// Clone agar tidak mengubah original
			const transformed = JSON.parse(JSON.stringify(apiData));
			
			// 1. Pastikan ada custom_fields (gabungkan dari fields yang bukan standar)
			const standardKeys = ['InvoiceDate', 'DueDate', 'InvoiceNumber'];
			const standardFields = [];
			const customFields = [];
			
			(apiData.fields || []).forEach(f => {
				if (standardKeys.includes(f.key)) {
					standardFields.push(f);
				} else {
					customFields.push(f);
				}
			});
			
			transformed.fields = standardFields;
			transformed.custom_fields = customFields;
			
			// 2. Totals: pindahkan dari root ke dalam table
			if (apiData.totals && !transformed.table.totals) {
				transformed.table.totals = apiData.totals;
			}
			
			// 3. Hapus baris total dari table.rows (isTotalRow true)
			if (transformed.table.rows) {
				transformed.table.rows = transformed.table.rows.filter(row => !row.isTotalRow);
			}
			
			// 4. Pastikan description dari table.description jika kosong
			if (!transformed.description && transformed.table.description) {
				transformed.description = transformed.table.description;
			}
			
			// 5. Ubah status: jika ada status dengan tone, masukkan ke emphasis
			if (apiData.status && !transformed.emphasis) {
				transformed.emphasis = {
					text: apiData.status.text,
					positive: apiData.status.tone === 'positive',
					negative: apiData.status.tone === 'negative'
				};
			}
			
			// 6. Kolom sumText (opsional jika tidak ada)
			if (!transformed.table.columns.some(c => c.sumText)) {
				transformed.table.columns.forEach(c => { c.sumText = ''; });
			}
			
			return transformed;
		}

		// Ambil data dari API, transform, lalu render
		window.addEventListener("load", () => {
			fetch('/api4/view-v1' + window.location.search, {
				headers: { 'Accept': 'application/json' },
				credentials: 'same-origin'
			})
			.then(response => response.json())
			.then(apiData => {
				const data = transformApiData(apiData);
				// Panggil fungsi render (kode asli yang sebelumnya berada di dalam event message)
				renderDocument(data);
			});
		});

		// === DI BAWAH INI ADALAH KODE RENDER ASLI (TIDAK DIUBAH) ===
		function renderDocument(data) {
			console.log(JSON.stringify(data, null, 2));

			document.documentElement.dir = data.direction;
			document.title = [data?.business?.name, data?.title, data?.reference].filter(Boolean).join(' - ');

			document.getElementById("title").innerHTML = data.title || "No title";
			document.getElementById("description").innerHTML = data.description || "";

			var businessLogoTd = document.getElementById("business-logo");
			businessLogoTd.innerHTML = "";
			if (data.business.logo) {
				const img = document.createElement("img");
				img.src = data.business.logo;
				img.style = "max-height: 75px; max-width: 150px; display: inline";
				businessLogoTd.appendChild(img);
			}

			const business = data.business || {};
			document.getElementById("business-info").innerHTML = `<strong>${business.name || ""}</strong><br>${business.address ? business.address.replace(/\n/g, "<br>") : ""}`;

			const recipient = data.recipient || {};
			let recipientAddress = recipient.address || "";
			recipientAddress = recipientAddress.replace(/(Address:|NTN:|STRN:)/g, '<strong>$1</strong>');
			document.getElementById("recipient-info").innerHTML = `<strong>${recipient.name || ""}</strong><br>${recipientAddress.replace(/\n/g, "<br>")}`;

			const fieldsDiv = document.getElementById("fields");
			fieldsDiv.innerHTML = "";
			(data.fields || []).forEach(f => {
				const dt = document.createElement("dt");
				dt.innerHTML = f.label;
				const dd = document.createElement("dd");
				dd.innerHTML = f.text;
				fieldsDiv.appendChild(dt);
				fieldsDiv.appendChild(dd);
			});

			const headersRow = document.getElementById("table-headers");
			headersRow.innerHTML = "";
			(data.table.columns || []).forEach(col => {
				const th = document.createElement("th");
				th.innerHTML = col.label;
				th.style.textAlign = col.align;
				if (col.minWidth) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '1px';
				}
				else if (col.nowrap) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '80px';
				}
				headersRow.appendChild(th);
			});

			const rowsBody = document.getElementById("table-rows");
			rowsBody.innerHTML = "";
			(data.table.rows || []).forEach(row => {
				const tr = document.createElement("tr");
				tr.className = 'row';
				row.cells.forEach((cell, i) => {
					var col = data.table.columns[i];
					const td = document.createElement("td");
					td.innerHTML = (cell.text || "").split("\n").join("<br />");
					td.style.textAlign = col.align;
					if (col.minWidth) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '1px';
					}
					else if (col.nowrap) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '80px';
					}
					tr.appendChild(td);
				});
				rowsBody.appendChild(tr);
			});

			const rows = rowsBody.querySelectorAll('tr.row');
			if (rows.length > 0) {
				const lastRow = rows[rows.length - 1];
				lastRow.classList.add('last-row');
			}

			const trSum = document.createElement("tr");
			trSum.classList.add('column-total');
			(data.table.columns || []).forEach(col => {
				const td = document.createElement("td");
				td.style.textAlign = col.align;
				if (col.label !== "No.") {
					td.innerHTML = col.sumText;
				}
				trSum.appendChild(td);
			});
			if (trSum.innerText) rowsBody.appendChild(trSum);

			(data.table.totals || []).forEach(total => {
				const tr = document.createElement("tr");
				tr.className = 'total';
				const tdLabel = document.createElement("td");
				tdLabel.innerHTML = total.label;
				tdLabel.colSpan = data.table.columns.length - 1;
				const tdValue = document.createElement("td");
				tdValue.innerHTML = total.text;
				tdValue.id = total.key;
				if (total.class) tdValue.classList.add(total.class);
				tdValue.dataset.value = total.number;
				if (total.emphasis) {
					tdLabel.style.fontWeight = 'bold';
					tdValue.style.fontWeight = 'bold';
				}
				tr.appendChild(tdLabel);
				tr.appendChild(tdValue);
				rowsBody.appendChild(tr);
			});

			// CUSTOM FIELDS & QR CODE (sama persis)
			const customFieldsDiv = document.getElementById("custom-fields");
			const qrCodeDiv = document.getElementById("qrcode");
			customFieldsDiv.innerHTML = "";
			qrCodeDiv.innerHTML = "";
			
			const cssBase64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAABrCAYAAABwv3wMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkJBNkUwMkY3NDA1MTFGMDkyNjZBM0UyNkIzNDM1OUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkJBNkUwMzA3NDA1MTFGMDkyNjZBM0UyNkIzNDM1OUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQkE2RTAyRDc0MDUxMUYwOTI2NkEzRTI2QjM0MzU5QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQkE2RTAyRTc0MDUxMUYwOTI2NkEzRTI2QjM0MzU5QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlV5w7oAAB8WSURBVHja7F0HnFTV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";
			
			const invoiceFieldKey = "24b11f97-46d7-472e-ad4b-e99fbed9197e";
			const qrFieldKey = "d2e9265a-460e-4a06-83f9-29a523a4d516";
			const invoiceField = (data.custom_fields || []).find(cf => cf.key === invoiceFieldKey);
			const invoiceNumber = invoiceField?.text || "";
			const excludedKeys = new Set([invoiceFieldKey, qrFieldKey]);
			
			(data.custom_fields || []).forEach(f => {
				if (f.key === qrFieldKey && invoiceNumber) {
					const wrapperDiv = document.createElement("div");
					wrapperDiv.style.cssText = "background-color: #e6f2ff; border: 1px solid #b3d1ff; border-radius: 8px; padding: 10px; margin-bottom: 10px; display: inline-block;";
					const flexDiv = document.createElement("div");
					flexDiv.style.cssText = "display: flex; gap: 0px; align-items: center;";
					if (cssBase64Image) {
						const staticImg = document.createElement("img");
						staticImg.src = cssBase64Image;
						staticImg.style.width = "100px";
						staticImg.style.height = "100px";
						staticImg.alt = "Logo";
						flexDiv.appendChild(staticImg);
					}
					if (f.image?.url) {
						const qrImg = document.createElement("img");
						qrImg.src = f.image.url;
						qrImg.width = f.image.width || 100;
						qrImg.height = f.image.height || 100;
						qrImg.alt = "QR Code";
						flexDiv.appendChild(qrImg);
					}
					wrapperDiv.appendChild(flexDiv);
					const infoDiv = document.createElement("div");
					infoDiv.style.cssText = "padding-left: 10px; padding-top: 5px; text-align: left; background-color: #fff;";
					infoDiv.innerHTML = `<strong>FBR Invoice Number:</strong><br />${invoiceNumber}`;
					wrapperDiv.appendChild(infoDiv);
					qrCodeDiv.appendChild(wrapperDiv);
				}
				else if (f.displayAtTheTop && !excludedKeys.has(f.key)) {
					const dt = document.createElement("dt");
					dt.innerHTML = f.label;
					const dd = document.createElement("dd");
					dd.innerHTML = f.text;
					fieldsDiv.appendChild(dt);
					fieldsDiv.appendChild(dd);
				}
				else if (!excludedKeys.has(f.key)) {
					const div = document.createElement("div");
					div.innerHTML = `<strong>${f.label || ""}</strong><br />${(f.text || "").split("\n").join("<br />")}<br /><br />`;
					customFieldsDiv.appendChild(div);
				}
			});

			const footersDiv = document.getElementById("footers");
			footersDiv.innerHTML = "";
			(data.footers || []).forEach(f => {
				const div = document.createElement("div");
				div.style = 'margin-top: 20px';
				div.innerHTML = f;
				footersDiv.appendChild(div);
				const scripts = div.querySelectorAll("script");
				scripts.forEach(script => {
					const newScript = document.createElement("script");
					for (const attr of script.attributes) {
						newScript.setAttribute(attr.name, attr.value);
					}
					if (script.textContent) newScript.textContent = script.textContent;
					script.parentNode.replaceChild(newScript, script);
				});
			});

			const statusDiv = document.getElementById("status");
			statusDiv.innerHTML = "";
			if (data.emphasis?.text != null) {
				statusDiv.style.marginTop = '40px';
				const span = document.createElement("span");
				span.style = 'border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px; text-transform: uppercase';
				if (data.emphasis.positive) {
					span.style.color = 'green';
					span.style.borderColor = 'green';
				}
				if (data.emphasis.negative) {
					span.style.color = 'red';
					span.style.borderColor = 'red';
				}
				span.innerHTML = data.emphasis.text;
				statusDiv.appendChild(span);
			}
		}
	</script>
</body>
</html>