fmard/pdf-api
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>Debit Note - {{ dn_number | default('DN-0001') }}</title>6 <style>7 * { margin: 0; padding: 0; box-sizing: border-box; }8 body {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 padding: 40px;11 color: #1f2937;12 font-size: 13px;13 line-height: 1.5;14 }15 .header {16 display: flex;17 justify-content: space-between;18 align-items: flex-start;19 margin-bottom: 30px;20 padding-bottom: 20px;21 border-bottom: 3px solid #4f46e5;22 }23 .company-info h1 { font-size: 20px; color: #4f46e5; margin-bottom: 4px; }24 .company-info p { font-size: 12px; color: #6b7280; }25 .doc-title { text-align: right; }26 .doc-title h2 {27 font-size: 26px;28 color: #4f46e5;29 text-transform: uppercase;30 letter-spacing: 1px;31 }32 .doc-title .badge {33 display: inline-block;34 background: #fee2e2;35 color: #991b1b;36 padding: 3px 12px;37 border-radius: 12px;38 font-size: 11px;39 font-weight: 600;40 margin-top: 6px;41 }42 .parties {43 display: flex;44 justify-content: space-between;45 margin-bottom: 24px;46 }47 .party-block h4 {48 font-size: 10px;49 text-transform: uppercase;50 color: #6b7280;51 margin-bottom: 6px;52 letter-spacing: 0.5px;53 }54 .party-block p { margin-bottom: 2px; }55 .meta-section {56 display: flex;57 gap: 30px;58 margin-bottom: 24px;59 padding: 12px 16px;60 background: #f9fafb;61 border-radius: 6px;62 border-left: 4px solid #4f46e5;63 }64 .meta-section div span { display: block; font-size: 10px; color: #6b7280; text-transform: uppercase; }65 .meta-section div strong { font-size: 13px; }66 .reason-box {67 margin-bottom: 24px;68 padding: 12px 16px;69 background: #fee2e2;70 border-radius: 6px;71 border-left: 4px solid #dc2626;72 }73 .reason-box h4 { font-size: 11px; text-transform: uppercase; color: #991b1b; margin-bottom: 4px; }74 .reason-box p { font-size: 13px; color: #7f1d1d; }75 table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }76 thead th {77 background: #4f46e5;78 color: #fff;79 padding: 10px 12px;80 text-align: left;81 font-size: 11px;82 text-transform: uppercase;83 }84 thead th:nth-child(3), thead th:nth-child(4), thead th:last-child { text-align: right; }85 tbody td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }86 tbody td:nth-child(3), tbody td:nth-child(4), tbody td:last-child { text-align: right; }87 tbody tr:nth-child(even) { background: #f9fafb; }88 .total-section {89 display: flex;90 justify-content: flex-end;91 margin-bottom: 30px;92 }93 .total-box {94 background: #fee2e2;95 padding: 14px 24px;96 border-radius: 6px;97 text-align: right;98 }99 .total-box span { font-size: 11px; color: #6b7280; display: block; }100 .total-box strong { font-size: 20px; color: #dc2626; }101 .notes { margin-top: 20px; padding-top: 14px; border-top: 1px solid #e5e7eb; }102 .notes h4 { font-size: 11px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }103 .notes p { font-size: 12px; color: #374151; }104 </style>105</head>106<body>107 <div class="header">108 <div class="company-info">109 <h1>{{ company_name | default('Your Company Name') }}</h1>110 <p>{{ company_address | default('123 Business Street, City, Country') }}</p>111 </div>112 <div class="doc-title">113 <h2>Debit Note</h2>114 <span class="badge">Additional Charge</span>115 </div>116 </div>117 118 <div class="parties">119 <div class="party-block">120 <h4>Issued To</h4>121 <p><strong>{{ client_name | default('Client Name') }}</strong></p>122 <p>{{ client_address | default('Client Address') }}</p>123 </div>124 </div>125 126 <div class="meta-section">127 <div><span>DN Number</span><strong>{{ dn_number | default('DN-0001') }}</strong></div>128 <div><span>Date</span><strong>{{ date | default('2025-01-01') }}</strong></div>129 <div><span>Original Invoice</span><strong>{{ original_invoice | default('INV-0001') }}</strong></div>130 </div>131 132 {% if reason | default('') %}133 <div class="reason-box">134 <h4>Reason</h4>135 <p>{{ reason }}</p>136 </div>137 {% endif %}138 139 <table>140 <thead>141 <tr>142 <th>#</th>143 <th>Description</th>144 <th>Qty</th>145 <th>Price</th>146 <th>Amount</th>147 </tr>148 </thead>149 <tbody>150 {% set ns = namespace(total=0) %}151 {% for item in items | default([{'description': 'Additional Charge', 'quantity': 1, 'price': 50}]) %}152 {% set line_total = item.quantity * item.price %}153 {% set ns.total = ns.total + line_total %}154 <tr>155 <td>{{ loop.index }}</td>156 <td>{{ item.description }}</td>157 <td>{{ item.quantity }}</td>158 <td>{{ "{:,.2f}".format(item.price) }}</td>159 <td>{{ "{:,.2f}".format(line_total) }}</td>160 </tr>161 {% endfor %}162 </tbody>163 </table>164 165 <div class="total-section">166 <div class="total-box">167 <span>Total Debit</span>168 <strong>{{ "{:,.2f}".format(ns.total) }}</strong>169 </div>170 </div>171 172 {% if notes | default('') %}173 <div class="notes">174 <h4>Notes</h4>175 <p>{{ notes }}</p>176 </div>177 {% endif %}178</body>179</html>