UI Update Customer Section
This commit is contained in:
Utkarsh Khedkar
@@ -6,194 +6,267 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
background: #f6f8fb;
|
||||
color: #2f3440;
|
||||
letter-spacing: 0.02em;
|
||||
background: #F7FBFC;
|
||||
color: #1A222B;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
.header-box {
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #1b2430;
|
||||
background: linear-gradient(to right, #0766ad 0%, #85c6ee 100%);
|
||||
padding: 26px 0 18px 0;
|
||||
margin-bottom: 28px;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 2px 12px rgba(35,82,124,0.08);
|
||||
.container {
|
||||
max-width: 850px;
|
||||
margin: 24px auto 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 13px;
|
||||
box-shadow: 0 2px 14px rgba(40,105,160,0.08);
|
||||
padding: 35px 32px 18px 32px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 2px solid #E6EBF0;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
.logo-company {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.logo {
|
||||
width: 120px;
|
||||
margin-bottom: 12px;
|
||||
filter: drop-shadow(0 2px 5px #0001);
|
||||
height: 50px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #1a4c8b;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 2px 9px #90caf944;
|
||||
}
|
||||
.subtitle {
|
||||
.company-details {
|
||||
margin-top: 0;
|
||||
font-size: 15px;
|
||||
margin-top: 3px;
|
||||
color: #376f9e;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 19px;
|
||||
.company-title {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 10px;
|
||||
color: #0766ad;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border-left: 4px solid #0766ad;
|
||||
padding-left: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.info-box {
|
||||
border: 1px solid #d3e3fd;
|
||||
padding: 13px 18px;
|
||||
line-height: 1.8;
|
||||
background: #ecf7ff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(100,143,176,0.05);
|
||||
margin-bottom: 7px;
|
||||
.company-sub {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.invoice-details {
|
||||
text-align: right;
|
||||
min-width: 220px;
|
||||
}
|
||||
.invoice-title {
|
||||
font-weight: bold;
|
||||
font-size: 23px;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.paid-label {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.paid-tag {
|
||||
background: #23BF47;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px 4px 22px;
|
||||
font-size: 17px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.paid-tag:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.paid-date {
|
||||
font-size: 14px;
|
||||
color: #23BF47;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.bill-section {
|
||||
background: #F3F7FB;
|
||||
border-radius: 11px;
|
||||
padding: 20px 18px 13px 18px;
|
||||
margin: 28px 0 16px 0;
|
||||
box-shadow: 0 0px 0px #0000;
|
||||
}
|
||||
.bill-title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: #23355D;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.bill-details {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 15px;
|
||||
margin-top: 9px;
|
||||
margin-bottom: 13px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 18px rgba(91,146,196,0.05);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
th {
|
||||
background: linear-gradient(90deg, #e3f1fb 80%, #f0f6ff 100%);
|
||||
padding: 10px 7px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #085d99;
|
||||
border: 1px solid #b1cbe1;
|
||||
text-align: center;
|
||||
background: #F6F7F9;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
color: #6781A6;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
td {
|
||||
padding: 8px 7px;
|
||||
border: 1px solid #dae5ec;
|
||||
color: #395471;
|
||||
font-size: 13px;
|
||||
background: #fafcff;
|
||||
padding: 7px 0;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
tbody tr:not(:last-child) td {
|
||||
border-bottom: 1px solid #E6EBF0;
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.totals-row td {
|
||||
font-weight: bold;
|
||||
color: #23355D;
|
||||
}
|
||||
.gst-row td {
|
||||
font-weight: 500;
|
||||
color: #23BF47;
|
||||
}
|
||||
.total-row td {
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
color: #222;
|
||||
}
|
||||
.payment-info {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.ref-number {
|
||||
font-size: 14px;
|
||||
color: #6781A6;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.footer {
|
||||
border-top: 1.2px solid #E6EBF0;
|
||||
margin-top: 25px;
|
||||
padding-top: 12px;
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background: #f3fafd;
|
||||
}
|
||||
tbody tr:hover td {
|
||||
background: #e2f1fa;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.totals-box {
|
||||
margin-top: 22px;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 22px;
|
||||
border: 1.5px solid #b1cbe1;
|
||||
background: linear-gradient(90deg, #eaf6fb 70%, #f8fbfe 100%);
|
||||
font-size: 16px;
|
||||
line-height: 2.1;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 2px 10px rgba(120,160,200,0.08);
|
||||
}
|
||||
.totals-box strong {
|
||||
color: #0766ad;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.header-box, .info-box, .totals-box {
|
||||
padding: 10px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 15.5px;
|
||||
padding-left: 7px;
|
||||
margin-bottom: 7px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
th, td {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
.footer strong {
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
<div class="header-box">
|
||||
<img src="{{ public_path('images/kent_logo2.png') }}" alt="logo" class="logo">
|
||||
<div class="title">KENT LOGISTICS</div>
|
||||
<div class="subtitle">Official Invoice</div>
|
||||
</div>
|
||||
<!-- INVOICE INFO -->
|
||||
<div class="info-box">
|
||||
<strong>Invoice No:</strong> {{ $invoice->invoice_number }} <br>
|
||||
<strong>Invoice Date:</strong> {{ $invoice->invoice_date }} <br>
|
||||
<strong>Due Date:</strong> {{ $invoice->due_date }} <br>
|
||||
<strong>Status:</strong> {{ ucfirst($invoice->status) }}
|
||||
</div>
|
||||
<!-- CUSTOMER DETAILS -->
|
||||
<div class="section-title">Customer Details</div>
|
||||
<div class="info-box">
|
||||
<strong>{{ $invoice->customer_name }}</strong><br>
|
||||
{{ $invoice->company_name }} <br>
|
||||
{{ $invoice->customer_mobile }} <br>
|
||||
{{ $invoice->customer_email }} <br>
|
||||
{{ $invoice->customer_address }}
|
||||
</div>
|
||||
<!-- ITEMS TABLE -->
|
||||
<div class="section-title">Invoice Items</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Description</th>
|
||||
<th>CTN</th>
|
||||
<th>QTY</th>
|
||||
<th>TTL/QTY</th>
|
||||
<th>Unit</th>
|
||||
<th>Price</th>
|
||||
<th>TTL Amount</th>
|
||||
<th>CBM</th>
|
||||
<th>TTL CBM</th>
|
||||
<th>KG</th>
|
||||
<th>TTL KG</th>
|
||||
<th>Shop No</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $i => $item)
|
||||
<tr>
|
||||
<td>{{ $i + 1 }}</td>
|
||||
<td>{{ $item->description }}</td>
|
||||
<td>{{ $item->ctn }}</td>
|
||||
<td>{{ $item->qty }}</td>
|
||||
<td>{{ $item->ttl_qty }}</td>
|
||||
<td>{{ $item->unit }}</td>
|
||||
<td>{{ number_format($item->price, 2) }}</td>
|
||||
<td>{{ number_format($item->ttl_amount, 2) }}</td>
|
||||
<td>{{ $item->cbm }}</td>
|
||||
<td>{{ $item->ttl_cbm }}</td>
|
||||
<td>{{ $item->kg }}</td>
|
||||
<td>{{ $item->ttl_kg }}</td>
|
||||
<td>{{ $item->shop_no }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- TOTALS -->
|
||||
<div class="section-title">Totals</div>
|
||||
<div class="totals-box">
|
||||
<strong>Amount:</strong> ₹{{ number_format($invoice->final_amount, 2) }} <br>
|
||||
<strong>GST ({{ $invoice->gst_percent }}%):</strong> ₹{{ number_format($invoice->gst_amount, 2) }} <br>
|
||||
<strong>Total With GST:</strong> <strong>₹{{ number_format($invoice->final_amount_with_gst, 2) }}</strong>
|
||||
<div class="container">
|
||||
<!-- Header Section -->
|
||||
<div class="header">
|
||||
<div class="logo-company">
|
||||
<img src="{{ public_path('images/kent_logo2.png') }}" class="logo">
|
||||
<div class="company-details">
|
||||
<div class="company-title">{{ $invoice->company_name ?? 'Kent International Pvt. Ltd.' }}</div>
|
||||
<div class="company-sub"></div>
|
||||
{{ $invoice->company_address ?? '123 Business Park, Sector 5' }}<br>
|
||||
{{ $invoice->company_city ?? 'Gurugram, Haryana 122001' }}<br>
|
||||
{{ $invoice->company_country ?? 'India' }}<br>
|
||||
GST: {{ $invoice->company_gst ?? 'GST123456789' }}<br>
|
||||
Email: {{ $invoice->company_email ?? 'billing@kent.com' }}<br>
|
||||
Phone: {{ $invoice->company_phone ?? '+91 124 123 4567' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-title">INVOICE</div>
|
||||
Invoice #: {{ $invoice->invoice_number }}<br>
|
||||
Issue Date: {{ date('d M Y', strtotime($invoice->invoice_date)) }}<br>
|
||||
Due Date: {{ date('d M Y', strtotime($invoice->due_date)) }}
|
||||
@if(strtolower($invoice->status) == 'paid')
|
||||
<div class="paid-label">
|
||||
<span class="paid-tag">Paid</span>
|
||||
</div>
|
||||
<div class="paid-date">
|
||||
Paid on: {{ date('d M Y', strtotime($invoice->paid_date ?? now())) }}
|
||||
</div>
|
||||
@else
|
||||
<div class="paid-date" style="color:#d00;">Status: {{ ucfirst($invoice->status) }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bill To Section -->
|
||||
<div class="bill-section">
|
||||
<div class="bill-title">Bill To</div>
|
||||
<div class="bill-details">
|
||||
<strong>{{ $invoice->customer_name }}</strong><br>
|
||||
{{ $invoice->customer_address }}<br>
|
||||
GST: {{ $invoice->customer_gst ?? '-' }}<br>
|
||||
Email: {{ $invoice->customer_email }}<br>
|
||||
Phone: {{ $invoice->customer_mobile }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Items Table -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Qty</th>
|
||||
<th>Rate (₹)</th>
|
||||
<th>Amount (₹)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr>
|
||||
<td>{{ $item->description }}</td>
|
||||
<td>{{ $item->qty }}</td>
|
||||
<td>{{ number_format($item->price, 0) }}</td>
|
||||
<td>{{ number_format($item->ttl_amount, 0) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
<tr class="totals-row">
|
||||
<td colspan="3" style="text-align:right;">Subtotal:</td>
|
||||
<td>{{ number_format($invoice->subtotal, 0) }}</td>
|
||||
</tr>
|
||||
<tr class="gst-row">
|
||||
<td colspan="3" style="text-align:right;">GST ({{ $invoice->gst_percent }}%):</td>
|
||||
<td>{{ number_format($invoice->gst_amount, 0) }}</td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td colspan="3" style="text-align:right;">Total:</td>
|
||||
<td>{{ number_format($invoice->final_amount_with_gst, 0) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Payment Info & Reference -->
|
||||
<div class="payment-info">
|
||||
<strong>Payment Method:</strong> {{ $invoice->payment_method ?? 'Bank Transfer' }}
|
||||
</div>
|
||||
<div class="ref-number">
|
||||
Reference Number: {{ $invoice->reference_no ?? "REF123456789" }}
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
Thank you for your business!<br>
|
||||
For any queries, please contact us at <strong>{{ $invoice->company_email ?? 'billing@kent.com' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user