|
<h2 class="sr-only">Redesigned delivery challan review page with organized sections, status badges, and a summary panel</h2>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
|
|
<div style="font-size:18px; font-weight:500; color:var(--text-primary);">Review</div>
|
|
<div style="display:flex; gap:8px;">
|
|
<span style="background:var(--bg-accent); color:var(--text-accent); font-size:12px; padding:4px 10px; border-radius:999px;">New outward</span>
|
|
<span style="background:var(--bg-success); color:var(--text-success); font-size:12px; padding:4px 10px; border-radius:999px;">E-way bill required</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:12px;">
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-flag-3" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Start</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px;">
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Entry mode</div><div>New Outward</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">DC type</div><div>DC for Job Work - EHS</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-building" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Header and party</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; font-size:13px;">
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">DC date</div><div>2026-09-11</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Branch</div><div>Bengaluru</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Company</div><div>Company E&H</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Party</div><div>Endress + Hauser Conducta Inc</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Consignee</div><div>Endress + Hauser Conducta Inc</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Ship to address</div><div>BP-CY-0002-Billing</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-truck" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Dispatch from</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px;">
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Company</div><div>Company E&H</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Address</div><div>E and H Bhiwandi-Billing</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-package" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Items (4)</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<table style="width:100%; font-size:13px; border-collapse:collapse; table-layout:fixed;">
|
|
<tr style="color:var(--text-secondary); text-align:left;">
|
|
<th style="font-weight:400; padding:6px 4px; border-bottom:0.5px solid var(--border);">Description</th>
|
|
<th style="font-weight:400; padding:6px 4px; border-bottom:0.5px solid var(--border);">HSN</th>
|
|
<th style="font-weight:400; padding:6px 4px; border-bottom:0.5px solid var(--border);">Qty</th>
|
|
<th style="font-weight:400; padding:6px 4px; border-bottom:0.5px solid var(--border);">UOM</th>
|
|
<th style="font-weight:400; padding:6px 4px; border-bottom:0.5px solid var(--border); text-align:right;">Unit cost</th>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:8px 4px;">100002023</td>
|
|
<td style="padding:8px 4px;">200040</td>
|
|
<td style="padding:8px 4px;">10</td>
|
|
<td style="padding:8px 4px;">Nos</td>
|
|
<td style="padding:8px 4px; text-align:right;">₹1,000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:8px 4px;">100002024</td>
|
|
<td style="padding:8px 4px;">200040</td>
|
|
<td style="padding:8px 4px;">10</td>
|
|
<td style="padding:8px 4px;">Nos</td>
|
|
<td style="padding:8px 4px; text-align:right;">₹1,000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:8px 4px;">100002025</td>
|
|
<td style="padding:8px 4px;">200040</td>
|
|
<td style="padding:8px 4px;">10</td>
|
|
<td style="padding:8px 4px;">Nos</td>
|
|
<td style="padding:8px 4px; text-align:right;">₹1,000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:8px 4px;">100002026</td>
|
|
<td style="padding:8px 4px;">200040</td>
|
|
<td style="padding:8px 4px;">10</td>
|
|
<td style="padding:8px 4px;">Nos</td>
|
|
<td style="padding:8px 4px; text-align:right;">₹1,000.00</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-arrows-shuffle" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Movement details</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; font-size:13px;">
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Purpose of movement</div><div>Test</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Returnable</div><div style="color:var(--text-success);">Yes</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Estimated return date</div><div>2026-09-11</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:1rem 1.25rem;">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<div style="display:flex; align-items:center; gap:8px;"><i class="ti ti-map-pin" style="font-size:18px; color:var(--text-accent);" aria-hidden="true"></i><span style="font-weight:500; font-size:15px;">Dispatch details</span></div>
|
|
<button style="font-size:13px; padding:4px 12px;">Edit</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; font-size:13px;">
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Mode of transport</div><div>PW Test Road</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Transporter</div><div>Siddhartha Logistics Ftwz Private Limited - Transport</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">Vehicle number</div><div>KA10ER20304</div></div>
|
|
<div><div style="color:var(--text-secondary); margin-bottom:2px;">LR number</div><div>10230303</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:var(--bg-accent-muted); border:0.5px solid var(--border-accent); border-radius:12px; padding:1.25rem;">
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; font-size:13px; margin-bottom:12px;">
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-secondary);">Taxable value</span><span>₹40,000.00</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-secondary);">IGST</span><span>₹7,200.00</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-secondary);">CGST</span><span>₹0.00</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-secondary);">SGST</span><span>₹0.00</span></div>
|
|
</div>
|
|
<div style="border-top:0.5px solid var(--border-accent); padding-top:12px; display:flex; align-items:baseline; justify-content:space-between;">
|
|
<span style="font-size:14px; font-weight:500;">Grand total</span>
|
|
<span style="font-size:22px; font-weight:500; color:var(--text-accent);">₹47,200.00</span>
|
|
</div>
|
|
<div style="font-size:12px; color:var(--text-secondary); margin-top:6px;">INR forty seven thousand, two hundred only</div>
|
|
</div>
|
|
|
|
</div>
|