Isuru Bimsara
372 lines
11 KiB
Plaintext
372 lines
11 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border: 1px solid #222;
|
|
}
|
|
|
|
.company-band {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.35fr 0.95fr;
|
|
min-height: 112px;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
|
|
.company-left,
|
|
.company-middle,
|
|
.company-right {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.company-left {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.company-middle {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-placeholder {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
letter-spacing: 6px;
|
|
color: #1c5c9d;
|
|
}
|
|
|
|
.company-middle .tagline {
|
|
margin-top: 4px;
|
|
font-size: 10px;
|
|
color: #555;
|
|
}
|
|
|
|
.company-right {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.company-right .stack {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.title-row {
|
|
border-bottom: 1px solid #444;
|
|
text-align: center;
|
|
padding: 5px 0 4px;
|
|
color: #7da3de;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bill-row {
|
|
display: grid;
|
|
grid-template-columns: 1.55fr 1fr;
|
|
border-bottom: 1px solid #444;
|
|
min-height: 72px;
|
|
}
|
|
|
|
.bill-left,
|
|
.bill-right {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.bill-left {
|
|
border-right: 1px solid #444;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.bill-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.bill-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
}
|
|
|
|
.meta-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
|
|
.meta-col {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.meta-col:first-child {
|
|
border-right: 1px solid #444;
|
|
}
|
|
|
|
.meta-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.meta-label {
|
|
font-weight: 700;
|
|
min-width: 112px;
|
|
}
|
|
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.items-table th,
|
|
.items-table td {
|
|
border: 1px solid #444;
|
|
font-size: 10px;
|
|
padding: 2px 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.items-table th {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
background: #b7d2ea;
|
|
}
|
|
|
|
.no-col { width: 5%; }
|
|
.desc-col { width: 37%; }
|
|
.remarks-col { width: 33%; }
|
|
.amount-col { width: 12%; }
|
|
.confirm-col { width: 13%; }
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.spacer-row td {
|
|
height: 26px;
|
|
}
|
|
|
|
.total-row td {
|
|
font-weight: 700;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.approval-area {
|
|
height: 94px;
|
|
border-top: 1px solid #444;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
padding: 10px 12px 14px;
|
|
}
|
|
|
|
.approval-box {
|
|
text-align: center;
|
|
min-width: 230px;
|
|
}
|
|
|
|
.signature-line {
|
|
margin-top: 18px;
|
|
border-top: 1px solid #222;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-row {
|
|
border-top: 1px solid #444;
|
|
text-align: center;
|
|
padding: 4px 0 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.watermark-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.line-dots {
|
|
letter-spacing: 3px;
|
|
text-align: right;
|
|
}
|
|
|
|
.company-logo-text {
|
|
text-align: center;
|
|
color: #1c5c9d;
|
|
font-size: 14px;
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.company-logo-small {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.header-stack {
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.small-note {
|
|
font-size: 9px;
|
|
color: #444;
|
|
}
|
|
|
|
.highlight {
|
|
background: #ffeb3b;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.multi-line {
|
|
white-space: pre-line;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<%
|
|
const creditCompany = typeof company !== 'undefined' && company ? company : {};
|
|
const creditHeader = typeof header !== 'undefined' && header ? header : {};
|
|
const creditBillTo = typeof billTo !== 'undefined' && billTo ? billTo : {};
|
|
const creditMeta = typeof meta !== 'undefined' && meta ? meta : {};
|
|
const creditVessel = typeof vessel !== 'undefined' && vessel ? vessel : {};
|
|
const creditOrderMeta = typeof orderMeta !== 'undefined' && orderMeta ? orderMeta : {};
|
|
const creditItems = typeof items !== 'undefined' && Array.isArray(items) ? items : [];
|
|
const creditApprovedByLabel = typeof approvedByLabel !== 'undefined' && approvedByLabel ? approvedByLabel : 'Approved by GLMS Finance Dept.';
|
|
const creditDepartmentLabel = typeof departmentLabel !== 'undefined' && departmentLabel ? departmentLabel : 'GLMS - Accounts Department';
|
|
%>
|
|
<div class="sheet">
|
|
<div class="company-band">
|
|
<div class="company-left">
|
|
<div><strong><%= creditCompany.name || 'GREEK-LANKA MARITIME SERVICES (PVT) LTD' %></strong></div>
|
|
<div><%= creditCompany.addressLine1 || '' %></div>
|
|
<div><%= creditCompany.addressLine2 || '' %></div>
|
|
<div><%= creditCompany.addressLine3 || '' %></div>
|
|
<div><%= creditCompany.postal || '' %></div>
|
|
<div><%= creditCompany.contact || '' %></div>
|
|
<div><%= creditCompany.br || '' %></div>
|
|
<div><%= creditCompany.license || '' %></div>
|
|
</div>
|
|
<div class="company-middle">
|
|
<div>
|
|
<div class="company-logo-text">GREEK<br/>LANKA</div>
|
|
<div class="company-logo-small">We Serve the Ocean</div>
|
|
</div>
|
|
</div>
|
|
<div class="company-right">
|
|
<div class="stack">
|
|
<div class="header-stack">
|
|
<div style="font-size: 14px; font-weight:700; color:#7da3de; letter-spacing:0.5px;">CREDIT NOTE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="title-row"><%= creditHeader.title || 'CREDIT NOTE' %></div>
|
|
|
|
<div class="bill-row">
|
|
<div class="bill-left">
|
|
<div><strong>Bill To :</strong> <%= creditBillTo.name || 'Master & Owner of MV TEAM VENTURES' %></div>
|
|
<div class="multi-line"><%- (creditBillTo.details || '').replace(/\n/g, '<br/>') || 'VRIDHI MARITIME SHIP MANAGEMENT & OPERATION LLC<br/>Office No: 2004, The Prism Tower, Dubai' %></div>
|
|
</div>
|
|
<div class="bill-right">
|
|
<div class="bill-line"><span><strong>CRN NO :</strong></span><span><%= creditMeta.crnNo || 'N/A' %></span></div>
|
|
<div class="bill-line"><span><strong>DATE :</strong></span><span><%= creditMeta.date || 'N/A' %></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta-row">
|
|
<div class="meta-col">
|
|
<div class="meta-line"><span class="meta-label">Vessel Name :</span> <span><%= creditVessel.name || 'N/A' %></span></div>
|
|
<div class="meta-line"><span class="meta-label">Port :</span> <span><%= creditVessel.port || 'N/A' %></span></div>
|
|
<div class="meta-line"><span class="meta-label">Name of Agent :</span> <span><%= creditVessel.agent || 'N/A' %></span></div>
|
|
</div>
|
|
<div class="meta-col">
|
|
<div class="meta-line"><span class="meta-label">GRT :</span> <span><%= creditVessel.grt || 'N/A' %></span></div>
|
|
<div class="meta-line"><span class="meta-label">IMO Number :</span> <span><%= creditVessel.imo || 'N/A' %></span></div>
|
|
<div class="meta-line"><span class="meta-label">Port/Country :</span> <span><%= creditVessel.portCountry || 'N/A' %></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="overflow-x:auto;">
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="no-col">DESCRIPTION</th>
|
|
<th class="amount-col">AMOUNT</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% if (creditItems.length > 0) { %>
|
|
<% creditItems.forEach((item, index) => { %>
|
|
<tr class="spacer-row">
|
|
<td>
|
|
<%= item.description || item.desc || '' %>
|
|
<% if (item.note) { %>
|
|
<div class="small-note"><%= item.note %></div>
|
|
<% } %>
|
|
</td>
|
|
<td class="right"><%= (typeof item.amount !== 'undefined') ? item.amount : '' %></td>
|
|
</tr>
|
|
<% }); %>
|
|
<% } %>
|
|
<tr class="total-row">
|
|
<td class="right">Total Amount</td>
|
|
<td class="right"><%= total || totalAmount || 0 %></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="approval-area">
|
|
<div class="approval-box">
|
|
<div style="height: 42px;"></div>
|
|
<div class="signature-line"></div>
|
|
<div style="margin-top: 4px;"><%= creditApprovedByLabel %></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-row">
|
|
<%= creditDepartmentLabel %>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |