-
Notifications
You must be signed in to change notification settings - Fork 0
/
invoice_template.html
114 lines (112 loc) · 5.56 KB
/
invoice_template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { font-family: Arial, sans-serif; }
.invoice-box { max-width: 800px; margin: auto; padding: 30px; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); font-size: 16px; line-height: 24px; color: #555; }
.invoice-box table { width: 100%; line-height: inherit; text-align: left; border-collapse: collapse; }
.invoice-box table td { padding: 5px; vertical-align: top; }
.invoice-box table tr td:nth-child(2) { text-align: right; }
.invoice-box table tr.top table td { padding-bottom: 20px; }
.invoice-box table tr.top table td.title { font-size: 45px; line-height: 45px; color: #333; }
.invoice-box table tr.information table td { padding-bottom: 40px; }
.invoice-box table tr.heading td { background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; padding: 5px; }
.invoice-box table tr.details td { padding-bottom: 20px; }
.invoice-box table tr.item td { border-bottom: 1px solid #eee; padding: 5px; }
.invoice-box table tr.item.last td { border-bottom: none; }
.invoice-box table tr.total td:nth-child(2) { border-top: 2px solid #eee; font-weight: bold; }
.signature { margin-top: 50px; text-align: right; }
.right-align { text-align: right; }
.invoice-details { text-align: right; }
.seller-details, .buyer-details { width: 50%; }
.item-table { width: 100%; }
.item-table th, .item-table td { text-align: right; }
.item-table th:first-child, .item-table td:first-child { text-align: left; }
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="{{ logo }}" style="width:100%; max-width:300px;">
</td>
<td class="invoice-details">
Invoice #: {{ invoice_details.invoice_no }}<br>
Created: {{ invoice_details.invoice_date }}<br>
Order #: {{ order_details.order_no }}
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td class="seller-details">
<strong>Seller Name:</strong> {{ seller_details.name }}<br>
<strong>Address:</strong> {{ seller_details.address }}<br>
{{ seller_details.city }}, {{ seller_details.state }} {{ seller_details.pincode }}<br>
<strong>PAN:</strong> {{ seller_details.pan_no }}<br>
<strong>GST:</strong> {{ seller_details.gst_no }}
</td>
<td class="buyer-details right-align">
<strong>Billing To:</strong><br>
{{ billing_details.name }}<br>
{{ billing_details.address }}<br>
{{ billing_details.city }}, {{ billing_details.state }} {{ billing_details.pincode }}<br>
<strong>State Code:</strong> {{ billing_details.state_code }}
</td>
</tr>
<tr>
<td colspan="2" class="right-align" style="padding-top: 20px;">
<strong>Shipping To:</strong><br>
{{ shipping_details.name }}<br>
{{ shipping_details.address }}<br>
{{ shipping_details.city }}, {{ shipping_details.state }} {{ shipping_details.pincode }}<br>
<strong>State Code:</strong> {{ shipping_details.state_code }}
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="item-table">
<tr class="heading">
<th style="width: 40%;">Description</th>
<th style="width: 10%;">Quantity</th>
<th style="width: 15%;">Unit Price</th>
<th style="width: 10%;">Discount</th>
<th style="width: 10%;">Net Amount</th>
<th style="width: 5%;">Tax Rate</th>
<th style="width: 10%;">Total Amount</th>
</tr>
{% for item in items %}
<tr class="item">
<td>{{ item.description }}</td>
<td>{{ item.quantity }}</td>
<td>₹{{ item.unit_price }}</td>
<td>₹{{ item.discount }}</td>
<td>₹{{ item.net_amount }}</td>
<td>{{ item.tax_rate }}%</td>
<td>₹{{ item.total_amount }}</td>
</tr>
{% endfor %}
<tr class="total">
<td colspan="6" style="text-align: right;">Total:</td>
<td>₹{{ total_amount }}</td>
</tr>
</table>
<div class="signature">
For {{ seller_details.name }}:<br>
<img src="{{ signature }}" style="width:100px;"><br>
Authorised Signatory
</div>
</div>
</body>
</html>