mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 14:08:11 +00:00
booking flow,summtion, approval, contract, mock payemnt and integration to back office, and also add permissions
This commit is contained in:
marshal
@@ -1,57 +1,116 @@
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
import { existsSync } from 'fs';
|
||||
|
||||
import { Injectable, InternalServerErrorException, Logger } from '@nestjs/common';
|
||||
|
||||
const MIN_VALID_PDF_BYTES = 2_000;
|
||||
|
||||
const PDF_PRINT_STYLES = `
|
||||
<style id="contract-pdf-print-fix">
|
||||
@media print {
|
||||
html, body {
|
||||
background: #fff !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
.cover {
|
||||
min-height: auto !important;
|
||||
page-break-after: always;
|
||||
}
|
||||
.cover-title {
|
||||
margin: 24mm 0 20mm !important;
|
||||
}
|
||||
}
|
||||
</style>`;
|
||||
|
||||
@Injectable()
|
||||
export class ContractPdfService {
|
||||
private readonly logger = new Logger(ContractPdfService.name);
|
||||
|
||||
async htmlToPdfBuffer(html: string): Promise<Buffer> {
|
||||
const preparedHtml = this.injectPdfPrintStyles(html);
|
||||
const executablePath = this.resolveExecutablePath();
|
||||
|
||||
try {
|
||||
const puppeteer = await import('puppeteer');
|
||||
const browser = await puppeteer.default.launch({
|
||||
const launchOptions: import('puppeteer').LaunchOptions = {
|
||||
headless: true,
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
||||
});
|
||||
args: [
|
||||
'--no-sandbox',
|
||||
'--disable-setuid-sandbox',
|
||||
'--disable-dev-shm-usage',
|
||||
],
|
||||
...(executablePath ? { executablePath } : {}),
|
||||
};
|
||||
|
||||
const browser = await puppeteer.default.launch(launchOptions);
|
||||
try {
|
||||
const page = await browser.newPage();
|
||||
await page.setContent(html, { waitUntil: 'load' });
|
||||
await page.setViewport({ width: 794, height: 1123, deviceScaleFactor: 1 });
|
||||
await page.setContent(preparedHtml, {
|
||||
waitUntil: 'load',
|
||||
timeout: 60_000,
|
||||
});
|
||||
await page.emulateMediaType('print');
|
||||
await new Promise((resolve) => setTimeout(resolve, 400));
|
||||
|
||||
const pdf = await page.pdf({
|
||||
format: 'A4',
|
||||
printBackground: true,
|
||||
margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
|
||||
displayHeaderFooter: true,
|
||||
headerTemplate: '<span></span>',
|
||||
footerTemplate:
|
||||
'<div style="width:100%;font-size:8px;color:#64748b;text-align:center;font-family:Arial,sans-serif;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
|
||||
margin: { top: '18mm', bottom: '22mm', left: '14mm', right: '14mm' },
|
||||
});
|
||||
return Buffer.from(pdf);
|
||||
|
||||
const buffer = Buffer.from(pdf);
|
||||
if (!this.isValidPdf(buffer)) {
|
||||
throw new Error(
|
||||
`Puppeteer produced invalid PDF (${buffer.length} bytes)`,
|
||||
);
|
||||
}
|
||||
this.logger.log(
|
||||
`Contract PDF rendered (${buffer.length} bytes) via ${executablePath ?? 'bundled Chromium'}`,
|
||||
);
|
||||
return buffer;
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
} catch (err) {
|
||||
this.logger.warn(
|
||||
`Puppeteer PDF failed, falling back to minimal PDF stub: ${err}`,
|
||||
this.logger.error(
|
||||
`Puppeteer PDF failed (executable=${executablePath ?? 'default'}): ${err}`,
|
||||
);
|
||||
throw new InternalServerErrorException(
|
||||
'Contract PDF could not be generated. Ensure Chromium is installed or set PUPPETEER_EXECUTABLE_PATH.',
|
||||
);
|
||||
return this.fallbackPdfBuffer(html);
|
||||
}
|
||||
}
|
||||
|
||||
/** Minimal valid PDF when Chromium is unavailable. */
|
||||
private fallbackPdfBuffer(html: string): Buffer {
|
||||
const text = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').slice(0, 2000);
|
||||
const escaped = text.replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
|
||||
const stream = `BT /F1 10 Tf 50 750 Td (${escaped}) Tj ET`;
|
||||
const len = stream.length;
|
||||
const pdf = `%PDF-1.4
|
||||
1 0 obj<< /Type /Catalog /Pages 2 0 R >>endobj
|
||||
2 0 obj<< /Type /Pages /Kids [3 0 R] /Count 1 >>endobj
|
||||
3 0 obj<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Contents 4 0 R /Resources << /Font << /F1 5 0 R >> >> >>endobj
|
||||
4 0 obj<< /Length ${len} >>stream
|
||||
${stream}
|
||||
endstream endobj
|
||||
5 0 obj<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>endobj
|
||||
xref
|
||||
0 6
|
||||
0000000000 65535 f
|
||||
trailer<< /Size 6 /Root 1 0 R >>
|
||||
startxref
|
||||
0
|
||||
%%EOF`;
|
||||
return Buffer.from(pdf, 'utf-8');
|
||||
private injectPdfPrintStyles(html: string): string {
|
||||
if (html.includes('contract-pdf-print-fix')) return html;
|
||||
if (html.includes('</head>')) {
|
||||
return html.replace('</head>', `${PDF_PRINT_STYLES}</head>`);
|
||||
}
|
||||
return `${PDF_PRINT_STYLES}${html}`;
|
||||
}
|
||||
|
||||
private resolveExecutablePath(): string | undefined {
|
||||
const fromEnv = process.env.PUPPETEER_EXECUTABLE_PATH?.trim();
|
||||
if (fromEnv && existsSync(fromEnv)) return fromEnv;
|
||||
|
||||
const candidates = [
|
||||
'/usr/bin/chromium',
|
||||
'/usr/bin/chromium-browser',
|
||||
'/usr/bin/google-chrome-stable',
|
||||
'/usr/bin/google-chrome',
|
||||
];
|
||||
return candidates.find((p) => existsSync(p));
|
||||
}
|
||||
|
||||
private isValidPdf(buffer: Buffer): boolean {
|
||||
return (
|
||||
buffer.length >= MIN_VALID_PDF_BYTES &&
|
||||
buffer.subarray(0, 5).toString('ascii') === '%PDF-'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ export class ContractPricingScheduleBuilder {
|
||||
})),
|
||||
totalAmount,
|
||||
currency,
|
||||
equipmentReturn: booking.equipmentReturn ?? undefined,
|
||||
equipmentReturn: booking.equipmentReturn ?? '—',
|
||||
originLabel: booking.originYard?.label ?? booking.originYard?.code ?? '—',
|
||||
destinationLabel:
|
||||
booking.destinationYard?.label ?? booking.destinationYard?.code ?? '—',
|
||||
|
||||
@@ -23,6 +23,31 @@ describe('ContractRendererService', () => {
|
||||
phone: '+251900000000',
|
||||
email: 'test@example.com',
|
||||
tinNumber: '1234567890',
|
||||
vatNumber: 'VAT-001',
|
||||
fanNumber: 'FAN-001',
|
||||
businessLicense: 'BL-001',
|
||||
},
|
||||
provider: {
|
||||
name: 'Ethio-Djibouti Standard Gauge Railway Share Company',
|
||||
address: 'Addis Ababa, Ethiopia',
|
||||
phone: '+251 11 872 0000',
|
||||
email: 'info@edr.gov.et',
|
||||
tinNumber: '—',
|
||||
},
|
||||
schedule: {
|
||||
originLabel: 'SGTD',
|
||||
destinationLabel: 'Modjo',
|
||||
tradeDirection: 'IMPORT',
|
||||
freightType: 'CONTAINER',
|
||||
serviceType: 'Rail transport',
|
||||
scheduledDate: '1 January 2026',
|
||||
contractType: 'NEW',
|
||||
cargoDescription: 'Container cargo',
|
||||
totalWeightVgm: '24 tons',
|
||||
equipmentReturn: 'RETURN',
|
||||
hazardousLabel: 'No',
|
||||
firstMilePickupAddress: '—',
|
||||
lastMileDeliveryAddress: '—',
|
||||
},
|
||||
pricing: {
|
||||
lineItems: [{ label: 'RAIL', description: 'Rail transport', amount: 1000, currency: 'ETB' }],
|
||||
|
||||
@@ -32,6 +32,31 @@ export interface ContractViewModel {
|
||||
phone: string;
|
||||
email: string;
|
||||
tinNumber: string;
|
||||
vatNumber: string;
|
||||
fanNumber: string;
|
||||
businessLicense: string;
|
||||
};
|
||||
provider: {
|
||||
name: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
tinNumber: string;
|
||||
};
|
||||
schedule: {
|
||||
originLabel: string;
|
||||
destinationLabel: string;
|
||||
tradeDirection: string;
|
||||
freightType: string;
|
||||
serviceType: string;
|
||||
scheduledDate: string;
|
||||
contractType: string;
|
||||
cargoDescription: string;
|
||||
totalWeightVgm: string;
|
||||
equipmentReturn: string;
|
||||
hazardousLabel: string;
|
||||
firstMilePickupAddress: string;
|
||||
lastMileDeliveryAddress: string;
|
||||
};
|
||||
pricing: PricingSchedule;
|
||||
signatures: ContractSignatureView[];
|
||||
@@ -81,19 +106,24 @@ export class ContractViewModelBuilder {
|
||||
}),
|
||||
contractYear: new Date().getFullYear(),
|
||||
client: {
|
||||
// companyName: booking.customer?.companyName ?? 'Client',
|
||||
// companyAddress: booking.customer?.companyAddress ?? '—',
|
||||
// companyLocation: booking.customer?.companyLocation ?? '—',
|
||||
// phone: booking.customer?.companyPhone ?? booking.customer?.phone ?? '—',
|
||||
// email: booking.customer?.companyEmail ?? booking.customer?.email ?? '—',
|
||||
// tinNumber: booking.customer?.tinNumber ?? '—',
|
||||
companyName: booking.company?.name ?? 'Client',
|
||||
companyAddress: booking.company?.address ?? '—',
|
||||
companyLocation: booking.company?.country ?? '—',
|
||||
phone: booking.company?.phone ?? '—',
|
||||
email: booking.company?.email ?? '—',
|
||||
tinNumber: booking.company?.tin ?? '—',
|
||||
companyAddress: this.valueOrDash(booking.company?.address),
|
||||
companyLocation: this.valueOrDash(booking.company?.country),
|
||||
phone: this.valueOrDash(booking.company?.phone),
|
||||
email: this.valueOrDash(booking.company?.email),
|
||||
tinNumber: this.valueOrDash(booking.company?.tin),
|
||||
vatNumber: this.valueOrDash(booking.company?.vatNumber),
|
||||
fanNumber: this.valueOrDash(booking.company?.fanNumber),
|
||||
businessLicense: this.valueOrDash(booking.company?.businessLicense),
|
||||
},
|
||||
provider: {
|
||||
name: 'Ethio-Djibouti Standard Gauge Railway Share Company',
|
||||
address: 'Addis Ababa, Ethiopia',
|
||||
phone: '+251 11 872 0000',
|
||||
email: 'info@edr.gov.et',
|
||||
tinNumber: '—',
|
||||
},
|
||||
schedule: this.buildSchedule(booking),
|
||||
pricing,
|
||||
signatures,
|
||||
canSignCustomer:
|
||||
@@ -117,8 +147,61 @@ export class ContractViewModelBuilder {
|
||||
return {
|
||||
role: row.signerRole,
|
||||
signerDisplayName: row.signerDisplayName,
|
||||
signedAt: row.signedAt.toISOString(),
|
||||
signedAt: this.formatDate(row.signedAt),
|
||||
signatureImageUrl: row.signatureFile?.url ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
private buildSchedule(booking: Booking): ContractViewModel['schedule'] {
|
||||
const cargoName =
|
||||
booking.freightType === 'BULK'
|
||||
? booking.cargoFreeText ||
|
||||
booking.cargoType?.cargoTypeName ||
|
||||
'Bulk commodity'
|
||||
: booking.cargoType?.cargoTypeName || 'Container cargo';
|
||||
const totalWeight = Number(booking.cargoTotalWeightVgm || 0);
|
||||
|
||||
return {
|
||||
originLabel: this.yardLabel(booking.originYard),
|
||||
destinationLabel: this.yardLabel(booking.destinationYard),
|
||||
tradeDirection: this.valueOrDash(booking.tradeDirection),
|
||||
freightType: this.valueOrDash(booking.freightType),
|
||||
serviceType: this.valueOrDash(
|
||||
booking.serviceType?.serviceName ?? booking.serviceType?.code,
|
||||
),
|
||||
scheduledDate: this.formatDate(booking.scheduledDate),
|
||||
contractType: this.valueOrDash(booking.contractType),
|
||||
cargoDescription: this.valueOrDash(cargoName),
|
||||
totalWeightVgm:
|
||||
totalWeight > 0 ? `${totalWeight.toLocaleString()} tons` : '—',
|
||||
equipmentReturn: this.valueOrDash(booking.equipmentReturn),
|
||||
hazardousLabel: booking.isHazardous ? 'Yes' : 'No',
|
||||
firstMilePickupAddress: this.valueOrDash(
|
||||
booking.firstMilePickupAddress,
|
||||
),
|
||||
lastMileDeliveryAddress: this.valueOrDash(
|
||||
booking.lastMileDeliveryAddress,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
private yardLabel(yard?: { label?: string; code?: string } | null): string {
|
||||
return this.valueOrDash(yard?.label ?? yard?.code);
|
||||
}
|
||||
|
||||
private formatDate(value?: Date | string | null): string {
|
||||
if (!value) return '—';
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '—';
|
||||
return date.toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
private valueOrDash(value?: string | number | null): string {
|
||||
if (value === undefined || value === null || value === '') return '—';
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<div class="article">
|
||||
<h2>Article 1: Objective and Scope of Services</h2>
|
||||
<p><strong>Objective:</strong> {{template.article1.objective}}</p>
|
||||
<p>
|
||||
<strong>1.1 Objective.</strong>
|
||||
{{template.article1.objective}}
|
||||
</p>
|
||||
{{#if template.article1.scope.length}}
|
||||
<p><strong>Scope:</strong></p>
|
||||
<p><strong>1.2 Scope of Services.</strong></p>
|
||||
<ol>
|
||||
{{#each template.article1.scope}}
|
||||
<li>{{this}}</li>
|
||||
|
||||
@@ -1,22 +1,31 @@
|
||||
<h2>Article 5: Contract Price and Terms of Payment</h2>
|
||||
<div class="article">
|
||||
<h3>Contract Price</h3>
|
||||
<p><strong>Corridor:</strong> {{pricing.originLabel}} → {{pricing.destinationLabel}}</p>
|
||||
<p>
|
||||
The contract price is calculated based on the agreed railway corridor, cargo details, applicable rate
|
||||
schedule, and any approved operational surcharges.
|
||||
</p>
|
||||
<table class="details-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Corridor</th>
|
||||
<td>{{pricing.originLabel}} → {{pricing.destinationLabel}}</td>
|
||||
<th>Currency</th>
|
||||
<td>{{pricing.currency}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Payment currency</th>
|
||||
<td>{{paymentArticle}}</td>
|
||||
<th>Equipment return</th>
|
||||
<td>{{pricing.equipmentReturn}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{#if pricing.equipmentReturn}}
|
||||
<p><strong>Equipment return:</strong> {{pricing.equipmentReturn}}</p>
|
||||
{{/if}}
|
||||
{{#if pricing.containerLines.length}}
|
||||
<table class="schedule">
|
||||
<thead>
|
||||
<tr><th>Container type</th><th>Quantity</th><th>VGM / unit (t)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each pricing.containerLines}}
|
||||
<tr><td>{{label}}</td><td>{{quantity}}</td><td>{{vgmPerUnitTons}}</td></tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/if}}
|
||||
|
||||
<h3>Charges</h3>
|
||||
<table class="schedule">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Description</th><th>Amount</th></tr>
|
||||
@@ -29,6 +38,10 @@
|
||||
<td>{{currency}} {{amount}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
{{#if pricing.surcharges.length}}
|
||||
<tr>
|
||||
<th colspan="3">Surcharges and Adjustments</th>
|
||||
</tr>
|
||||
{{#each pricing.surcharges}}
|
||||
<tr>
|
||||
<td>{{label}}</td>
|
||||
@@ -36,12 +49,18 @@
|
||||
<td>{{currency}} {{amount}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
<tr>
|
||||
{{/if}}
|
||||
<tr class="total-row">
|
||||
<td colspan="2"><strong>Total contract value</strong></td>
|
||||
<td><strong>{{pricing.currency}} {{pricing.totalAmount}}</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Terms of payment</h3>
|
||||
<p>All payments shall be made in accordance with EDR policy in <strong>{{paymentArticle}}</strong>, unless otherwise agreed in writing.</p>
|
||||
<p>
|
||||
Unless otherwise agreed in writing, the Client shall settle the contract value in
|
||||
<strong>{{paymentArticle}}</strong> before the service is performed and in accordance with EDR payment
|
||||
instructions. Bank charges, penalties, demurrage, storage, and third-party charges remain the
|
||||
responsibility of the Client where applicable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="article">
|
||||
<h2>Article 2: Obligations of the Client (summary)</h2>
|
||||
<h2>Article 2: Obligations of the Client</h2>
|
||||
<p>The Client shall perform the following obligations in good faith and within the operational timelines communicated by EDR:</p>
|
||||
<ol>
|
||||
{{#each template.clientObligations}}
|
||||
<li>{{this}}</li>
|
||||
@@ -8,7 +9,8 @@
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<h2>Article 3: Obligations of the Service Provider (summary)</h2>
|
||||
<h2>Article 3: Obligations of the Service Provider</h2>
|
||||
<p>EDR shall provide the agreed railway freight services in accordance with this Agreement and applicable operational rules:</p>
|
||||
<ol>
|
||||
{{#each template.providerObligations}}
|
||||
<li>{{this}}</li>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="article">
|
||||
<h2>Article 6: Contract Documents</h2>
|
||||
<p>The following documents form part of this Agreement and shall be read together with the signed contract:</p>
|
||||
<ol>
|
||||
{{#each template.contractDocuments}}
|
||||
<li>{{this}}</li>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<section class="page-section">
|
||||
<h2>Booking Schedule and Commercial Summary</h2>
|
||||
<table class="details-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Route</th>
|
||||
<td>{{schedule.originLabel}} → {{schedule.destinationLabel}}</td>
|
||||
<th>Trade direction</th>
|
||||
<td>{{schedule.tradeDirection}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Freight type</th>
|
||||
<td>{{schedule.freightType}}</td>
|
||||
<th>Service type</th>
|
||||
<td>{{schedule.serviceType}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Scheduled date</th>
|
||||
<td>{{schedule.scheduledDate}}</td>
|
||||
<th>Contract type</th>
|
||||
<td>{{schedule.contractType}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Cargo</th>
|
||||
<td>{{schedule.cargoDescription}}</td>
|
||||
<th>Total VGM</th>
|
||||
<td>{{schedule.totalWeightVgm}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Equipment return</th>
|
||||
<td>{{schedule.equipmentReturn}}</td>
|
||||
<th>Hazardous cargo</th>
|
||||
<td>{{schedule.hazardousLabel}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>First mile</th>
|
||||
<td>{{schedule.firstMilePickupAddress}}</td>
|
||||
<th>Last mile</th>
|
||||
<td>{{schedule.lastMileDeliveryAddress}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{#if pricing.containerLines.length}}
|
||||
<h3>Container Details</h3>
|
||||
<table class="schedule">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container type</th>
|
||||
<th>Quantity</th>
|
||||
<th>VGM / unit (tons)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each pricing.containerLines}}
|
||||
<tr>
|
||||
<td>{{label}}</td>
|
||||
<td>{{quantity}}</td>
|
||||
<td>{{vgmPerUnitTons}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/if}}
|
||||
</section>
|
||||
@@ -1,4 +1,12 @@
|
||||
<div class="article">
|
||||
<h2>Article 4: Force Majeure</h2>
|
||||
<p>Neither party is liable for delays due to force majeure interpreted under the Ethiopian Civil Code.</p>
|
||||
<p>
|
||||
Neither party shall be liable for delay or non-performance caused by events beyond its reasonable control,
|
||||
including natural disaster, war, civil unrest, government restriction, railway interruption, port closure,
|
||||
or other force majeure events interpreted under the Ethiopian Civil Code.
|
||||
</p>
|
||||
<p>
|
||||
The affected party shall notify the other party promptly and shall use reasonable efforts to reduce the
|
||||
effect of the force majeure event on the performance of this Agreement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,44 @@
|
||||
<div class="signatures">
|
||||
<div class="sig-block">
|
||||
<p><strong>Service Provider (EDR)</strong></p>
|
||||
<p class="sig-title">For the Service Provider</p>
|
||||
<p><strong>{{provider.name}}</strong></p>
|
||||
{{#if hasStaffSignature}}
|
||||
{{#each signatures}}
|
||||
{{#if (eq role "STAFF")}}
|
||||
{{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Staff signature" />{{/if}}
|
||||
<p>{{signerDisplayName}}</p>
|
||||
<p class="sig-line">Signed: {{signedAt}}</p>
|
||||
<div class="sig-image-box">
|
||||
{{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Staff signature" />{{/if}}
|
||||
</div>
|
||||
<p class="sig-line"><strong>Name:</strong> {{signerDisplayName}}</p>
|
||||
<p class="sig-meta"><strong>Role:</strong> Authorized EDR representative</p>
|
||||
<p class="sig-meta"><strong>Date:</strong> {{signedAt}}</p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<p class="sig-line">Authorized representative (pending)</p>
|
||||
<div class="sig-image-box"><span class="sig-placeholder">Signature pending</span></div>
|
||||
<p class="sig-line"><strong>Name:</strong> Authorized representative</p>
|
||||
<p class="sig-meta"><strong>Role:</strong> EDR representative</p>
|
||||
<p class="sig-meta"><strong>Date:</strong></p>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="sig-block">
|
||||
<p><strong>Client — {{client.companyName}}</strong></p>
|
||||
<p class="sig-title">For the Client</p>
|
||||
<p><strong>{{client.companyName}}</strong></p>
|
||||
{{#if hasCustomerSignature}}
|
||||
{{#each signatures}}
|
||||
{{#if (eq role "CUSTOMER")}}
|
||||
{{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Customer signature" />{{/if}}
|
||||
<p>{{signerDisplayName}}</p>
|
||||
<p class="sig-line">Signed: {{signedAt}}</p>
|
||||
<div class="sig-image-box">
|
||||
{{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Customer signature" />{{/if}}
|
||||
</div>
|
||||
<p class="sig-line"><strong>Name:</strong> {{signerDisplayName}}</p>
|
||||
<p class="sig-meta"><strong>Role:</strong> Authorized client representative</p>
|
||||
<p class="sig-meta"><strong>Date:</strong> {{signedAt}}</p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<p class="sig-line">Client representative (pending)</p>
|
||||
<div class="sig-image-box"><span class="sig-placeholder">Signature pending</span></div>
|
||||
<p class="sig-line"><strong>Name:</strong> Client representative</p>
|
||||
<p class="sig-meta"><strong>Role:</strong> Authorized client representative</p>
|
||||
<p class="sig-meta"><strong>Date:</strong></p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,258 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body { font-family: 'Times New Roman', Times, serif; font-size: 11pt; line-height: 1.45; color: #111; margin: 0; padding: 24px; }
|
||||
h1 { text-align: center; font-size: 14pt; text-transform: uppercase; margin: 0 0 8px; }
|
||||
h2 { font-size: 12pt; margin: 20px 0 8px; text-transform: uppercase; }
|
||||
h3 { font-size: 11pt; margin: 14px 0 6px; }
|
||||
.cover { text-align: center; margin-bottom: 32px; border-bottom: 2px solid #1e3a5f; padding-bottom: 24px; }
|
||||
.meta { margin: 12px 0; }
|
||||
.meta strong { display: inline-block; min-width: 140px; }
|
||||
.article { margin-bottom: 16px; }
|
||||
.article ol { padding-left: 20px; }
|
||||
.article li { margin-bottom: 6px; }
|
||||
table.schedule { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 10pt; }
|
||||
table.schedule th, table.schedule td { border: 1px solid #333; padding: 6px 8px; text-align: left; }
|
||||
table.schedule th { background: #f0f4f8; }
|
||||
.signatures { display: flex; gap: 40px; margin-top: 40px; page-break-inside: avoid; }
|
||||
.sig-block { flex: 1; }
|
||||
.sig-block img { max-height: 64px; max-width: 200px; display: block; margin: 8px 0; }
|
||||
.sig-line { border-top: 1px solid #000; margin-top: 48px; padding-top: 4px; font-size: 10pt; }
|
||||
.pending-banner { background: #fff8e6; border: 1px solid #e6c200; padding: 8px 12px; margin-bottom: 16px; font-size: 10pt; }
|
||||
@media print { body { padding: 0; } }
|
||||
@page { size: A4; margin: 18mm 14mm; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f5f7fb;
|
||||
color: #111827;
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.contract {
|
||||
width: 210mm;
|
||||
min-height: 297mm;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 18mm 15mm;
|
||||
}
|
||||
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
h1 {
|
||||
color: #0f2742;
|
||||
font-size: 18pt;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
border-bottom: 1.5px solid #1e3a5f;
|
||||
color: #1e3a5f;
|
||||
font-size: 12pt;
|
||||
letter-spacing: 0.03em;
|
||||
margin: 18px 0 10px;
|
||||
padding-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h3 {
|
||||
color: #0f2742;
|
||||
font-size: 10.8pt;
|
||||
margin: 12px 0 6px;
|
||||
}
|
||||
p { margin-bottom: 8px; }
|
||||
ol { margin: 6px 0 0; padding-left: 20px; }
|
||||
li { margin-bottom: 5px; }
|
||||
|
||||
.page-section,
|
||||
.article {
|
||||
margin-bottom: 18px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
align-items: center;
|
||||
border-bottom: 3px solid #1e3a5f;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.logo-mark {
|
||||
align-items: center;
|
||||
background: #1e3a5f;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16pt;
|
||||
font-weight: 700;
|
||||
height: 52px;
|
||||
justify-content: center;
|
||||
letter-spacing: 0.08em;
|
||||
width: 72px;
|
||||
}
|
||||
.kicker {
|
||||
color: #1e3a5f;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.muted {
|
||||
color: #6b7280;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
min-height: 255mm;
|
||||
position: relative;
|
||||
}
|
||||
.cover-title {
|
||||
margin: 54mm 0 34mm;
|
||||
text-align: center;
|
||||
}
|
||||
.document-label {
|
||||
color: #6b7280;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.summary-line {
|
||||
color: #374151;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9.5pt;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.meta-grid,
|
||||
.details-table,
|
||||
.schedule {
|
||||
font-size: 9.5pt;
|
||||
margin: 10px 0 16px;
|
||||
}
|
||||
.meta-grid th,
|
||||
.meta-grid td,
|
||||
.details-table th,
|
||||
.details-table td,
|
||||
.schedule th,
|
||||
.schedule td {
|
||||
border: 1px solid #cbd5e1;
|
||||
padding: 7px 8px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.meta-grid th,
|
||||
.details-table th,
|
||||
.schedule th {
|
||||
background: #eef4fb;
|
||||
color: #1e3a5f;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8.5pt;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.schedule tbody tr:nth-child(even) td { background: #f8fafc; }
|
||||
.total-row td {
|
||||
background: #e8f0f8 !important;
|
||||
color: #0f2742;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: #374151;
|
||||
font-size: 10.5pt;
|
||||
}
|
||||
.party-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.party-card {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
.party-card h3 {
|
||||
background: #1e3a5f;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9pt;
|
||||
margin: 0 0 10px;
|
||||
padding: 7px 9px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.party-name {
|
||||
color: #0f2742;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: 32% 68%;
|
||||
margin: 0;
|
||||
}
|
||||
dt {
|
||||
color: #475569;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8.5pt;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px 2px 0;
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.signatures {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 24px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.sig-block {
|
||||
border: 1.5px solid #1e3a5f;
|
||||
border-radius: 8px;
|
||||
min-height: 96mm;
|
||||
padding: 12px;
|
||||
}
|
||||
.sig-title {
|
||||
color: #1e3a5f;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9pt;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sig-image-box {
|
||||
align-items: center;
|
||||
border: 1px dashed #94a3b8;
|
||||
display: flex;
|
||||
height: 28mm;
|
||||
justify-content: center;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.sig-image-box img {
|
||||
display: block;
|
||||
max-height: 24mm;
|
||||
max-width: 70mm;
|
||||
}
|
||||
.sig-placeholder {
|
||||
color: #94a3b8;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
.sig-line {
|
||||
border-top: 1px solid #111827;
|
||||
margin-top: 16px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.sig-meta {
|
||||
color: #475569;
|
||||
font-size: 9pt;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background: #fff; }
|
||||
.contract {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
.cover { page-break-after: always; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,25 +6,86 @@
|
||||
{{> styles}}
|
||||
</head>
|
||||
<body>
|
||||
<div class="cover">
|
||||
<h1>Contract Agreement</h1>
|
||||
<h1>{{template.title}}</h1>
|
||||
<p class="meta"><strong>Contract Ref No:</strong> {{reference}}</p>
|
||||
<p class="meta"><strong>Year:</strong> {{contractYear}}</p>
|
||||
</div>
|
||||
<main class="contract">
|
||||
<section class="cover page-section">
|
||||
<div class="brand-row">
|
||||
<div class="logo-mark">EDR</div>
|
||||
<div>
|
||||
<p class="kicker">Ethio-Djibouti Standard Gauge Railway Share Company</p>
|
||||
<p class="muted">Freight Transport Contract</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>This Contract Agreement is made on <strong>{{contractDate}}</strong>.</p>
|
||||
<p><strong>Between</strong> Ethio-Djibouti Standard Gauge Railway Share Company (EDR), Addis Ababa (“Service Provider”), and <strong>{{client.companyName}}</strong> at {{client.companyAddress}}, {{client.companyLocation}} (“Client”). Phone {{client.phone}} / {{client.email}}. TIN {{client.tinNumber}}.</p>
|
||||
<div class="cover-title">
|
||||
<p class="document-label">Contract Agreement</p>
|
||||
<h1>{{template.title}}</h1>
|
||||
<p class="summary-line">{{template.directionLabel}} • {{template.freightLabel}} • {{template.currency}} • {{template.serviceScope}}</p>
|
||||
</div>
|
||||
|
||||
<h2>Whereas</h2>
|
||||
<p>{{template.whereas}}</p>
|
||||
<p>Now therefore, the parties agree as follows:</p>
|
||||
<table class="meta-grid">
|
||||
<tr>
|
||||
<th>Contract Ref No.</th>
|
||||
<td>{{reference}}</td>
|
||||
<th>Contract Year</th>
|
||||
<td>{{contractYear}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Contract Date</th>
|
||||
<td>{{contractDate}}</td>
|
||||
<th>Status</th>
|
||||
<td>{{status}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
{{> article1}}
|
||||
{{> articles_obligations}}
|
||||
{{> article5_pricing}}
|
||||
{{> force_majeure}}
|
||||
{{> contract_documents}}
|
||||
{{> signatures_block}}
|
||||
<section class="page-section">
|
||||
<h2>Parties to the Agreement</h2>
|
||||
<p class="lead">
|
||||
This Contract Agreement is made on <strong>{{contractDate}}</strong> between the Service Provider and the Client named below.
|
||||
</p>
|
||||
|
||||
<div class="party-grid">
|
||||
<div class="party-card">
|
||||
<h3>Service Provider</h3>
|
||||
<p class="party-name">{{provider.name}}</p>
|
||||
<dl>
|
||||
<dt>Address</dt><dd>{{provider.address}}</dd>
|
||||
<dt>Phone</dt><dd>{{provider.phone}}</dd>
|
||||
<dt>Email</dt><dd>{{provider.email}}</dd>
|
||||
<dt>TIN</dt><dd>{{provider.tinNumber}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="party-card">
|
||||
<h3>Client</h3>
|
||||
<p class="party-name">{{client.companyName}}</p>
|
||||
<dl>
|
||||
<dt>Address</dt><dd>{{client.companyAddress}}</dd>
|
||||
<dt>Location</dt><dd>{{client.companyLocation}}</dd>
|
||||
<dt>Phone</dt><dd>{{client.phone}}</dd>
|
||||
<dt>Email</dt><dd>{{client.email}}</dd>
|
||||
<dt>TIN</dt><dd>{{client.tinNumber}}</dd>
|
||||
<dt>VAT</dt><dd>{{client.vatNumber}}</dd>
|
||||
<dt>FAN</dt><dd>{{client.fanNumber}}</dd>
|
||||
<dt>Business license</dt><dd>{{client.businessLicense}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{> contract_schedule}}
|
||||
|
||||
<section class="page-section">
|
||||
<h2>Whereas</h2>
|
||||
<p>{{template.whereas}}</p>
|
||||
<p>Now therefore, the parties agree as follows:</p>
|
||||
</section>
|
||||
|
||||
{{> article1}}
|
||||
{{> articles_obligations}}
|
||||
{{> force_majeure}}
|
||||
{{> article5_pricing}}
|
||||
{{> contract_documents}}
|
||||
{{> signatures_block}}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user