Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Srestham – Tax Invoice</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style> | |
| /* ===== Page & print ===== */ | |
| @page { size: A4; margin: 16mm 10mm; } | |
| html, body { height: 100%; } | |
| body { | |
| font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; | |
| margin: 0; color: #111; background:#fff; | |
| } | |
| .invoice-wrap { width: 210mm; max-width: 100%; margin: 0 auto; } | |
| h1.title { text-align:center; font-size: 18px; margin: 6px 0 10px; letter-spacing: .4px; } | |
| /* ===== Frame ===== */ | |
| .frame { border: 1px solid #888; border-radius: 2px; padding: 8px 8px 10px; } | |
| .row { display: grid; grid-gap: 0; } | |
| .muted { color:#444; } | |
| .small { font-size: 11px; } | |
| .right { text-align:right; } | |
| .bold { font-weight:600; } | |
| .mb8 { margin-bottom: 8px; } | |
| .mb4 { margin-bottom: 4px; } | |
| .mt4 { margin-top: 4px; } | |
| /* ===== Header block (logo + seller) ===== */ | |
| .hdr { | |
| grid-template-columns: 1fr 1.2fr; | |
| align-items: start; | |
| } | |
| .logo-wrap { display:flex; align-items:flex-start; gap:8px; } | |
| .logo { height: 100px; border: none; } | |
| .tagline { font-size: 12px; margin-top: 6px; } | |
| .seller h3 { margin: 0 0 4px; font-size: 14px; } | |
| .seller p { margin: 0; line-height: 1.25; font-size: 11.5px; } | |
| .statbar { background:#e9edf3; border:1px solid #bfc7d1; border-left:0; border-right:0; padding:4px 6px; font-size: 11.5px; } | |
| /* ===== Meta (Invoice No / Date) ===== */ | |
| .meta { grid-template-columns: 140px 1fr 140px 1fr; border:1px solid #999; border-top:0; } | |
| .meta > div { padding:4px 6px; border-right:1px solid #999; } | |
| .meta > div:nth-child(4n) { border-right:0; } | |
| .lbl { background:#f5f5f5; font-weight:600; } | |
| /* ===== Customer details ===== */ | |
| .cust-hdr { border:1px solid #999; border-top:0; padding:4px 6px; font-weight:600; } | |
| .cust { display:grid; grid-template-columns: 1fr 140px 1fr; border:1px solid #999; border-top:0; } | |
| .cust > div { padding:6px; } | |
| .cust .grid { display:grid; grid-template-columns: 70px 1fr; } | |
| .cust .grid > div { padding:2px 0; border-bottom:1px solid #eee; } | |
| .cust .grid > div:nth-child(2n) { border-left:1px solid #eee; padding-left:8px; } | |
| /* ===== Items table ===== */ | |
| table.items { width:100%; border-collapse:collapse; margin-top: 6px; } | |
| table.items th, table.items td { border:1px solid #999; padding:6px 6px; font-size: 12px; vertical-align: top; } | |
| table.items th { background:#f5f5f5; font-weight:600; } | |
| table.items tfoot td { border:1px solid #999; padding:6px 6px; font-size: 12px; } | |
| table.items tfoot td.label { background:#f5f5f5; font-weight:600; text-align:center; } | |
| .num { text-align:right; white-space:nowrap; } | |
| .pct { text-align:center; } | |
| .w-sr { width:40px; } | |
| .w-desc { width:auto; } | |
| .w-hsn { width:90px; } | |
| .w-taxval { width:95px; } | |
| .w-pct { width:45px; } | |
| .w-amt { width:95px; } | |
| .w-total { width:110px; } | |
| /* ===== Totals ===== */ | |
| .totals { width:100%; border-collapse:collapse; margin-top: 6px; } | |
| .totals td { border:1px solid #999; padding:6px; font-size:12px; } | |
| .totals td.label { background:#f5f5f5; font-weight:600; text-align:center; } | |
| /* ===== Words & bank ===== */ | |
| .words, .bank { border:1px solid #999; border-top:0; padding:6px; font-size:12px; } | |
| .bank { display:grid; grid-template-columns: 1fr 200px; } | |
| .bank .rightbox { border-left:1px solid #999; padding-left:6px; display:flex; flex-direction:column; justify-content:space-between; } | |
| .bank .sign { text-align:right; padding-top:40px; } | |
| /* ===== Print tweaks ===== */ | |
| @media print { .invoice-wrap { width:auto; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="invoice-wrap"> | |
| <h1 class="title">TAX INVOICE</h1> | |
| <div class="frame"> | |
| <!-- Header: logo left, seller right --> | |
| <div class="row hdr mb8"> | |
| <div> | |
| <div class="logo-wrap"> | |
| <img class="logo" src="assets/srestham.png" alt="Srestham logo" /> | |
| </div> | |
| </div> | |
| <div class="seller"> | |
| <h3>Srestham</h3> | |
| <p>(a unit of A1 Future Technologies Pvt. Ltd.)</p> | |
| <p>64/89, Khudiram Bose Sarani, Dutta Bagan, Milk Colony, Kolkata - 700037, India</p> | |
| <p>Phone : +91-9007797979, +91-9831066996</p> | |
| <p>Website : <span>www.srestham.com</span> E‑Mail : <span>info@srestham.com</span></p> | |
| <p>State : West Bengal, Code: 19</p> | |
| </div> | |
| </div> | |
| <div class="statbar small"> | |
| GSTIN: 19AAKCA7063N1Z1 | PAN : AAKCA7063N | CIN : U72200WB2012PTC183279 | |
| </div> | |
| <!-- Invoice meta --> | |
| <div class="row meta"> | |
| <div class="lbl">Invoice No.</div> | |
| <div data-key="invoice_no"></div> | |
| <div class="lbl">Date</div> | |
| <div data-key="invoice_date"></div> | |
| </div> | |
| <!-- Customer --> | |
| <div class="cust-hdr">Customer Details</div> | |
| <div class="cust"> | |
| <div> | |
| <div class="bold" data-key="customer_name"></div> | |
| <div data-key="customer_address_1"></div> | |
| <div data-key="customer_address_2"></div> | |
| <div data-key="customer_address_3"></div> | |
| </div> | |
| <div></div> | |
| <div class="grid small"> | |
| <div class="bold right">GSTIN :</div><div data-key="buyer_gstin"></div> | |
| <div class="bold right">PAN :</div><div data-key="buyer_pan"></div> | |
| <div class="bold right">CIN :</div><div data-key="buyer_cin"></div> | |
| <div class="bold right">PO No. :</div><div data-key="po_no"></div> | |
| <div class="bold right">State :</div><div data-key="buyer_state"></div> | |
| </div> | |
| </div> | |
| <!-- Items table --> | |
| <table class="items"> | |
| <thead> | |
| <tr> | |
| <th class="w-sr">Sr.<br/>No.</th> | |
| <th class="w-desc">Service Details</th> | |
| <th class="w-hsn">HSN</th> | |
| <th class="w-taxval">Taxable<br/>Value</th> | |
| <th class="w-pct">CGST<br/>%</th> | |
| <th class="w-amt">CGST<br/>Amt</th> | |
| <th class="w-pct">SGST/UGST<br/>%</th> | |
| <th class="w-amt">SGST/UGST<br/>Amt</th> | |
| <th class="w-pct">IGST<br/>%</th> | |
| <th class="w-amt">IGST<br/>Amt</th> | |
| <th class="w-total">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody data-key="items_tbody"> | |
| <!-- rows will be injected --> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="3" class="label">TOTAL</td> | |
| <td class="num" data-key="total_taxable"></td> | |
| <td></td> | |
| <td class="num" data-key="total_cgst"></td> | |
| <td></td> | |
| <td class="num" data-key="total_sgst"></td> | |
| <td></td> | |
| <td class="num" data-key="total_igst"></td> | |
| <td class="num" data-key="grand_total"></td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| <!-- Totals strip moved into items table as tfoot for perfect alignment --> | |
| <table class="totals"> | |
| <tr> | |
| <td class="label" colspan="9" style="text-align:right">Rounding Off</td> | |
| <td class="num" data-key="rounding"></td> | |
| </tr> | |
| <tr> | |
| <td class="label" colspan="9" style="text-align:right">Net Amount</td> | |
| <td class="num" data-key="net_amount"></td> | |
| </tr> | |
| </table> | |
| <div class="words"> | |
| <div><span class="bold">Total Invoice Value (In Words):</span> <span data-key="words_total"></span></div> | |
| <div><span class="bold">Total CGST Value (In Words):</span> <span data-key="words_cgst"></span></div> | |
| <div><span class="bold">Total SGST Value (In Words):</span> <span data-key="words_sgst"></span></div> | |
| <div><span class="bold">Total IGST Value (In Words):</span> <span data-key="words_igst"></span></div> | |
| </div> | |
| <div class="bank"> | |
| <div> | |
| <div class="bold">Bank Details</div> | |
| <div>Account Name: A1 Future Technologies Private Limited</div> | |
| <div>Bank Name: HDFC Bank Ltd. - Bank Branch: Shyam Bazar</div> | |
| <div>Account No.: 01742320002223 - Swift Code : HDFCINBBCAL </div> | |
| <div>RTGS / NEFT IFSC : HDFC0000174 - MICR Code: 700240011</div> | |
| </div> | |
| <div class="rightbox"> | |
| <div class="right">E. & O. E.</div> | |
| <div class="sign">For Srestham</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Minimal injection helpers (optional) --- | |
| function fmtMoney(n){ | |
| if(n === null || n === undefined || isNaN(n)) return ''; | |
| return Number(n).toLocaleString('en-IN', {minimumFractionDigits:2, maximumFractionDigits:2}); | |
| } | |
| function inject(data){ | |
| // Simple fields | |
| const map = { | |
| invoice_no: 'INV/00001/25-26', | |
| invoice_date: 'April 1, 2025', | |
| customer_name: 'Binay Sharma', | |
| customer_address_1: "H. No. 8-54/22, Happy's Home", | |
| customer_address_2: 'Sai Harsha Nagar Colony, Hydershakote,', | |
| customer_address_3: '500091 Hyderabad TG', | |
| buyer_gstin: '', buyer_pan: '', buyer_cin: '', | |
| po_no: '', buyer_state: 'Telangana, Code: 36', | |
| total_taxable: fmtMoney(9150), total_cgst: fmtMoney(0), total_sgst: fmtMoney(0), total_igst: fmtMoney(1648), | |
| grand_total: fmtMoney(10798), rounding: fmtMoney(0), net_amount: fmtMoney(10798), | |
| words_total: 'Rupees Ten Thousand Seven Hundred Ninety Eight Only', | |
| words_cgst: 'No Rupees Only', words_sgst: 'No Rupees Only', | |
| words_igst: 'Rupees One Thousand Six Hundred Forty Eight Only' | |
| }; | |
| Object.assign(map, data||{}); | |
| document.querySelectorAll('[data-key]').forEach(el=>{ | |
| const k = el.getAttribute('data-key'); | |
| if(k === 'items_tbody') return; | |
| if(map[k] !== undefined) el.textContent = map[k]; | |
| }); | |
| // Items | |
| const rows = (data && data.items) || [ | |
| { sr:1, desc:'Inephos Framed Canvas Painting - Seven Running White Horses 47 X 29', hsn:'491199', tax:4575, cgst_p:0, cgst_a:0, sgst_p:0, sgst_a:0, igst_p:18, igst_a:824, total:5399 }, | |
| { sr:2, desc:'Inephos Framed Canvas Painting - Divine Radha Krishna 47 X 29', hsn:'491199', tax:4575, cgst_p:0, cgst_a:0, sgst_p:0, sgst_a:0, igst_p:18, igst_a:824, total:5399 }, | |
| ]; | |
| const tbody = document.querySelector('[data-key="items_tbody"]'); | |
| tbody.innerHTML = rows.map(r => ` | |
| <tr> | |
| <td class="w-sr num">${r.sr}</td> | |
| <td class="w-desc">${r.desc || ''}</td> | |
| <td class="w-hsn">${r.hsn || ''}</td> | |
| <td class="w-taxval num">${fmtMoney(r.tax)}</td> | |
| <td class="w-pct pct">${r.cgst_p||0}</td> | |
| <td class="w-amt num">${fmtMoney(r.cgst_a||0)}</td> | |
| <td class="w-pct pct">${r.sgst_p||0}</td> | |
| <td class="w-amt num">${fmtMoney(r.sgst_a||0)}</td> | |
| <td class="w-pct pct">${r.igst_p||0}</td> | |
| <td class="w-amt num">${fmtMoney(r.igst_a||0)}</td> | |
| <td class="w-total num">${fmtMoney(r.total||0)}</td> | |
| </tr>`).join(''); | |
| } | |
| // Example: inject with defaults | |
| inject(); | |
| </script> | |
| </body> | |
| </html> | |