e6c67e217a
Update the styling and layout of PDF invoices and labels to align with the new brand identity (Navy and Amber color scheme). Key changes: - Refactor `invoice.blade.php` to use a structured table-based layout for better Dompdf compatibility. - Implement a new color palette using Navy (#1a1a2e) and Amber (#f59e0b). - Redesign `label.blade.php` with a split-cell layout (barcode left, info right) for improved readability. - Standardize typography and spacing across all document templates. - Remove obsolete sample PDF files from the repository.
418 lines
15 KiB
PHP
418 lines
15 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
/* ════════ Base & Page ════════ */
|
||
* { margin: 0; padding: 0; }
|
||
body {
|
||
font-family: DejaVu Sans, Arial, sans-serif;
|
||
font-size: 9px;
|
||
color: #111827;
|
||
line-height: 1.4;
|
||
}
|
||
@page {
|
||
margin-top: 10mm;
|
||
margin-bottom: 10mm;
|
||
margin-left: 12mm;
|
||
margin-right: 12mm;
|
||
}
|
||
.page { width: 100%; }
|
||
|
||
/* ════════ Brand Colors (matching AWB) ════════ */
|
||
/* Navy: #1a1a2e | Amber: #f59e0b | Gray bg: #f3f4f6 */
|
||
|
||
/* ════════ Header ════════ */
|
||
.header-table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
border-bottom: 3px solid #1a1a2e;
|
||
margin-bottom: 6px;
|
||
}
|
||
.header-table td {
|
||
vertical-align: middle;
|
||
padding: 4px 6px 8px 6px;
|
||
word-wrap: break-word;
|
||
}
|
||
.header-logo {
|
||
width: 80px;
|
||
height: auto;
|
||
}
|
||
.header-title {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #1a1a2e;
|
||
text-align: center;
|
||
letter-spacing: 3px;
|
||
}
|
||
.header-meta {
|
||
text-align: right;
|
||
font-size: 9px;
|
||
color: #6b7280;
|
||
}
|
||
.header-awb {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #1a1a2e;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* ════════ Route Bar ════════ */
|
||
.route-bar {
|
||
width: 100%;
|
||
background: #f3f4f6;
|
||
border: 1px solid #d1d5db;
|
||
padding: 4px 8px;
|
||
margin-bottom: 6px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
color: #1a1a2e;
|
||
}
|
||
.route-arrow {
|
||
color: #f59e0b;
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ════════ Grid (Shipper / Consignee) ════════ */
|
||
.grid-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 6px;
|
||
}
|
||
.grid-table > tbody > tr > td {
|
||
width: 50%;
|
||
vertical-align: top;
|
||
border: 1.5px solid #1a1a2e;
|
||
}
|
||
.grid-table > tbody > tr > td.left {
|
||
border-right: 0.5px solid #1a1a2e;
|
||
}
|
||
|
||
/* ════════ Section Header ════════ */
|
||
.section-header {
|
||
background: #1a1a2e;
|
||
color: #ffffff;
|
||
padding: 4px 8px;
|
||
font-weight: bold;
|
||
font-size: 11px;
|
||
letter-spacing: 1.5px;
|
||
}
|
||
|
||
/* ════════ Field Table ════════ */
|
||
.field-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 9px;
|
||
}
|
||
.field-table td {
|
||
padding: 2px 8px;
|
||
vertical-align: top;
|
||
border-bottom: 0.5px solid #e5e7eb;
|
||
}
|
||
.field-table td.label {
|
||
width: 40%;
|
||
color: #6b7280;
|
||
font-weight: bold;
|
||
}
|
||
.field-table td.value {
|
||
color: #111827;
|
||
}
|
||
.field-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* ════════ Items Table ════════ */
|
||
.details-section {
|
||
border: 1.5px solid #1a1a2e;
|
||
margin-bottom: 6px;
|
||
}
|
||
.details-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 8.5px;
|
||
}
|
||
.details-table th {
|
||
background: #1a1a2e;
|
||
color: #ffffff;
|
||
padding: 4px;
|
||
text-align: left;
|
||
font-weight: bold;
|
||
border: 0.5px solid #1a1a2e;
|
||
}
|
||
.details-table td {
|
||
padding: 3px 4px;
|
||
border: 0.5px solid #d1d5db;
|
||
color: #111827;
|
||
}
|
||
.details-table tr:nth-child(even) td {
|
||
background: #f9fafb;
|
||
}
|
||
.details-total td {
|
||
background: #f3f4f6 !important;
|
||
font-weight: bold;
|
||
color: #1a1a2e;
|
||
}
|
||
|
||
/* ════════ Weight & Dimensions ════════ */
|
||
.weight-table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
margin-bottom: 6px;
|
||
border: 1.5px solid #1a1a2e;
|
||
}
|
||
.weight-table td {
|
||
width: 33.33%;
|
||
text-align: center;
|
||
padding: 5px;
|
||
border-right: 1px solid #1a1a2e;
|
||
vertical-align: middle;
|
||
}
|
||
.weight-table td:last-child {
|
||
border-right: none;
|
||
}
|
||
.weight-label {
|
||
font-size: 8px;
|
||
color: #6b7280;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
margin-bottom: 2px;
|
||
}
|
||
.weight-value {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #1a1a2e;
|
||
}
|
||
|
||
/* ════════ Reason & Declaration ════════ */
|
||
.reason-section,
|
||
.declaration {
|
||
border: 1px solid #d1d5db;
|
||
padding: 5px 8px;
|
||
margin-bottom: 6px;
|
||
font-size: 8.5px;
|
||
line-height: 1.5;
|
||
color: #4b5563;
|
||
}
|
||
.reason-section .section-header,
|
||
.declaration .section-header {
|
||
margin: -5px -8px 5px -8px;
|
||
}
|
||
.reason-text {
|
||
font-style: italic;
|
||
color: #111827;
|
||
}
|
||
.declaration strong {
|
||
color: #1a1a2e;
|
||
}
|
||
|
||
/* ════════ Signature ════════ */
|
||
.signature-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 6px;
|
||
}
|
||
.signature-table td {
|
||
width: 50%;
|
||
padding: 8px;
|
||
text-align: center;
|
||
font-size: 8px;
|
||
color: #6b7280;
|
||
}
|
||
.sig-line {
|
||
border-top: 1px solid #1a1a2e;
|
||
margin-top: 28px;
|
||
padding-top: 3px;
|
||
font-size: 8px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
/* ════════ Footer ════════ */
|
||
.footer {
|
||
border-top: 2px solid #1a1a2e;
|
||
padding-top: 4px;
|
||
text-align: center;
|
||
font-size: 8px;
|
||
color: #6b7280;
|
||
}
|
||
.footer-brand {
|
||
color: #1a1a2e;
|
||
font-weight: bold;
|
||
font-size: 10px;
|
||
margin-bottom: 1px;
|
||
}
|
||
.footer-track {
|
||
font-size: 9px;
|
||
color: #f59e0b;
|
||
font-weight: bold;
|
||
margin: 1px 0;
|
||
}
|
||
.footer-meta {
|
||
font-size: 7px;
|
||
color: #9ca3af;
|
||
margin-top: 2px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<!-- ════════ HEADER ════════ -->
|
||
<table class="header-table">
|
||
<tr>
|
||
<td style="width: 30%;">
|
||
<img src="{{ public_path('images/ifnex-logo.png') }}" class="header-logo" alt="IFNEX">
|
||
</td>
|
||
<td style="width: 40%;" align="center">
|
||
<div class="header-title">INVOICE</div>
|
||
</td>
|
||
<td style="width: 30%;" class="header-meta">
|
||
<div class="header-awb">INV: {{ $shipment->awb_no }}</div>
|
||
<div>Date: {{ $shipment->created_at?->format('m/d/Y') }}</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ ROUTE BAR ════════ -->
|
||
<div class="route-bar">
|
||
From: {{ strtoupper($shipment->fromCountry?->name ?? '—') }} ({{ $shipment->fromCountry?->iso_code }})
|
||
<span class="route-arrow"> → </span>
|
||
To: {{ strtoupper($shipment->toCountry?->name ?? '—') }} ({{ $shipment->toCountry?->iso_code }})
|
||
</div>
|
||
|
||
<!-- ════════ SHIPPER & CONSIGNEE ════════ -->
|
||
<table class="grid-table">
|
||
<tr>
|
||
<td class="left">
|
||
<div class="section-header">SHIPPER</div>
|
||
<table class="field-table">
|
||
<tr><td class="label">Company</td><td class="value">{{ $shipper['company'] ?: $shipper['name'] }}</td></tr>
|
||
<tr><td class="label">Contact Person</td><td class="value">{{ $shipper['name'] ?: '—' }}</td></tr>
|
||
<tr><td class="label">Address</td><td class="value">{{ $shipper['address'] ?: '—' }}</td></tr>
|
||
@if($shipper['city'])
|
||
<tr><td class="label">City</td><td class="value">{{ $shipper['city'] }}</td></tr>
|
||
@endif
|
||
@if($shipper['zip'])
|
||
<tr><td class="label">Zip Code</td><td class="value">{{ $shipper['zip'] }}</td></tr>
|
||
@endif
|
||
<tr><td class="label">Phone</td><td class="value">{{ $shipper['phone'] ?: '—' }}</td></tr>
|
||
@if($shipper['email'])
|
||
<tr><td class="label">Email</td><td class="value">{{ $shipper['email'] }}</td></tr>
|
||
@endif
|
||
</table>
|
||
</td>
|
||
<td>
|
||
<div class="section-header">CONSIGNEE</div>
|
||
<table class="field-table">
|
||
<tr><td class="label">Company</td><td class="value">{{ $receiver['company'] ?: $receiver['name'] }}</td></tr>
|
||
<tr><td class="label">Contact Person</td><td class="value">{{ $receiver['name'] ?: '—' }}</td></tr>
|
||
<tr><td class="label">Address</td><td class="value">{{ $receiver['address'] ?: '—' }}</td></tr>
|
||
@if($receiver['city'])
|
||
<tr><td class="label">City</td><td class="value">{{ $receiver['city'] }}</td></tr>
|
||
@endif
|
||
@if($receiver['zip'])
|
||
<tr><td class="label">Zip Code</td><td class="value">{{ $receiver['zip'] }}</td></tr>
|
||
@endif
|
||
<tr><td class="label">Phone</td><td class="value">{{ $receiver['phone'] ?: '—' }}</td></tr>
|
||
@if($receiver['email'])
|
||
<tr><td class="label">Email</td><td class="value">{{ $receiver['email'] }}</td></tr>
|
||
@endif
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ ITEMS TABLE ════════ -->
|
||
<div class="details-section">
|
||
<div class="section-header">SHIPMENT DETAILS</div>
|
||
<table class="details-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 5%;">No</th>
|
||
<th style="width: 40%;">Description</th>
|
||
<th style="width: 15%;">H.S. Code</th>
|
||
<th style="width: 10%;">Qty</th>
|
||
<th style="width: 15%;">Unit Price (USD)</th>
|
||
<th style="width: 15%;">Total (USD)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse($items as $item)
|
||
<tr>
|
||
<td>{{ $item->row_number }}</td>
|
||
<td>{{ $item->description }}</td>
|
||
<td>{{ $item->hs_code ?: '—' }}</td>
|
||
<td>{{ $item->quantity }}</td>
|
||
<td>{{ number_format($item->unit_price, 2) }}</td>
|
||
<td>{{ number_format($item->total_usd, 2) }}</td>
|
||
</tr>
|
||
@empty
|
||
<tr><td colspan="6" style="text-align:center; color:#9ca3af;">No items</td></tr>
|
||
@endforelse
|
||
<tr class="details-total">
|
||
<td colspan="5" style="text-align: right;">TOTAL INVOICE AMOUNT (USD):</td>
|
||
<td>{{ number_format($invoice_total_usd, 2) }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ════════ WEIGHT & DIMENSIONS ════════ -->
|
||
<table class="weight-table">
|
||
<tr>
|
||
<td>
|
||
<div class="weight-label">Gross Weight</div>
|
||
<div class="weight-value">{{ number_format($shipment->weight ?? 0, 3) }} KG</div>
|
||
</td>
|
||
<td>
|
||
<div class="weight-label">Volumetric Weight</div>
|
||
<div class="weight-value">{{ number_format($shipment->volumetric_weight ?? 0, 3) }} KG</div>
|
||
</td>
|
||
<td>
|
||
<div class="weight-label">W × L × H (cm)</div>
|
||
<div class="weight-value">{{ $shipment->dimensions ?: '—' }}</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ REASON FOR EXPORT ════════ -->
|
||
@if($shipment->reason_for_export)
|
||
<div class="reason-section">
|
||
<div class="section-header">REASON FOR EXPORT</div>
|
||
<div class="reason-text">{{ $shipment->reason_for_export }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
<!-- ════════ DECLARATION & SIGNATURE ════════ -->
|
||
<div class="declaration">
|
||
<div class="section-header">DECLARATION</div>
|
||
<p>I hereby certify that the information on this invoice is true and correct, and that the goods originated from the country shown above. This invoice is for customs purposes only.</p>
|
||
</div>
|
||
|
||
<table class="signature-table">
|
||
<tr>
|
||
<td style="border-left: 1px solid #e5e7eb;">
|
||
Shipper Name & Signature
|
||
<div class="sig-line"></div>
|
||
</td>
|
||
<td>
|
||
Date
|
||
<div class="sig-line">...../...../..........</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ FOOTER ════════ -->
|
||
<div class="footer">
|
||
<div class="footer-brand">IFNEX LOGISTICS — We Deliver Value</div>
|
||
<div class="footer-track">Track Your Shipment: http://ifnex.net</div>
|
||
<div class="footer-meta">
|
||
Invoice: {{ $shipment->awb_no }} | Generated: {{ now()->format('Y-m-d H:i') }} | © {{ date('Y') }} IFNEX Logistics
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |