Isuru Bimsara
189 lines
5.0 KiB
Plaintext
189 lines
5.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@page {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 14px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background: #fff;
|
|
}
|
|
|
|
.sheet {
|
|
width: 100%;
|
|
border: 2px solid #2a5aa8;
|
|
background: #fff;
|
|
}
|
|
|
|
.logo-row {
|
|
height: 82px;
|
|
border-bottom: 1px solid #4c4c4c;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 6px 12px 2px;
|
|
}
|
|
|
|
.logo-row img {
|
|
max-height: 64px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.title-row {
|
|
border-bottom: 1px solid #4c4c4c;
|
|
text-align: center;
|
|
padding: 6px 0 7px;
|
|
color: #2f5fa6;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.details {
|
|
display: grid;
|
|
grid-template-columns: 1.6fr 1fr;
|
|
gap: 0;
|
|
min-height: 84px;
|
|
border-bottom: 1px solid #bdbdbd;
|
|
}
|
|
|
|
.left-pane,
|
|
.right-pane {
|
|
padding: 10px 8px 8px;
|
|
}
|
|
|
|
.left-pane {
|
|
border-right: 1px solid #d4d4d4;
|
|
}
|
|
|
|
.label-line {
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: #111;
|
|
}
|
|
|
|
.label-line + .label-line {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.right-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.right-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.right-row .value {
|
|
font-weight: 400;
|
|
text-transform: none;
|
|
}
|
|
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.items-table th,
|
|
.items-table td {
|
|
border: 1px solid #5d5d5d;
|
|
font-size: 11px;
|
|
padding: 5px 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.items-table th {
|
|
background: #a7d8df;
|
|
color: #111;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.no-col { width: 8%; }
|
|
.desc-col { width: 36%; }
|
|
.remarks-col { width: 25%; }
|
|
.unit-col { width: 14%; }
|
|
.qty-col { width: 17%; }
|
|
|
|
.items-table tbody td {
|
|
height: 16px;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<div class="logo-row">
|
|
<% if (logoBase64) { %>
|
|
<img src="<%= logoBase64 %>" alt="Company Logo" />
|
|
<% } %>
|
|
</div>
|
|
|
|
<div class="title-row"><%= title || 'DELIVERY NOTE' %></div>
|
|
|
|
<div class="details">
|
|
<div class="left-pane">
|
|
<div class="label-line">Bill To: <span style="font-weight:700;"><%= billToName || 'N/A' %></span></div>
|
|
<div class="label-line"><%= billToAddress || 'N/A' %></div>
|
|
</div>
|
|
<div class="right-pane">
|
|
<div class="right-row"><span>Supply Date:</span> <span class="value"><%= supplyDate || 'N/A' %></span></div>
|
|
<div class="right-row"><span>PO Number:</span> <span class="value"><%= poNumber || 'N/A' %></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="no-col">No.</th>
|
|
<th class="desc-col">Description</th>
|
|
<th class="remarks-col">Remarks</th>
|
|
<th class="unit-col">Unit</th>
|
|
<th class="qty-col">Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% const rows = Math.max(10, (items && items.length) || 0); %>
|
|
<% for (let index = 0; index < rows; index++) { %>
|
|
<% const item = items && items[index] ? items[index] : {}; %>
|
|
<tr>
|
|
<td class="center"><%= index + 1 %></td>
|
|
<td><%= item.description || item.item_name || item.name || '' %></td>
|
|
<td><%= item.remarks || '' %></td>
|
|
<td class="center"><%= item.unit || '' %></td>
|
|
<td class="right"><%= item.quantity || item.qty || '' %></td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html> |