new invoice design
This commit is contained in:
Parsa Nazer
@@ -1,11 +1,18 @@
|
||||
|
||||
{% load price_filters %}
|
||||
<!doctype html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>صورتحساب الکترونیکی - فروشگاه هیملز</title>
|
||||
<title>صورتحساب الکترونیکی - شماره {{ order_number }}</title>
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
margin: 8mm;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -13,12 +20,13 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f8fafc;
|
||||
background: #fff;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
padding: 3rem 1rem;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
font-family: 'Vazir', 'Tahoma', Arial, sans-serif;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.pattern-bg {
|
||||
@@ -28,9 +36,9 @@
|
||||
height: 200%;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
background: url("logo-pattern.png") repeat;
|
||||
background-size: 150px;
|
||||
opacity: 0.05;
|
||||
background: url("{{ logo_pattern_path }}") repeat;
|
||||
background-size: 100px;
|
||||
opacity: 0.04;
|
||||
transform: rotate(12deg);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
@@ -38,23 +46,23 @@
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 1300px;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
width: 140px;
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid #6366f1;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1.5px solid #6366f1;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
padding: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@@ -68,59 +76,63 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #6366f1;
|
||||
gap: 2.25rem;
|
||||
margin-bottom: 2.5rem;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-row img {
|
||||
width: 96px;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
direction: ltr;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 300px;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
grid-template-columns: 220px 1fr 50px;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.vertical-label {
|
||||
background: #e0e7ff;
|
||||
border: 2px solid #6366f1;
|
||||
border: 1.5px solid #6366f1;
|
||||
color: #6366f1;
|
||||
border-radius: 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
transform: rotate(180deg);
|
||||
padding: 0.75rem 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
direction: rtl;
|
||||
padding: 4px 2px;
|
||||
font-size: 9px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: white;
|
||||
border: 2px solid #6366f1;
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
border: 1.5px solid #6366f1;
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
direction: rtl;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem 2rem;
|
||||
gap: 4px 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
gap: 3px;
|
||||
white-space: nowrap;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.info-item span:first-child {
|
||||
@@ -131,21 +143,20 @@
|
||||
.doc-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Buyer row - full width */
|
||||
.buyer-row {
|
||||
height: 100px;
|
||||
direction: ltr;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
grid-template-columns: 1fr 50px;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
border: 2px solid #6366f1;
|
||||
border-radius: 1rem;
|
||||
border: 1.5px solid #6366f1;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -153,20 +164,21 @@
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.9rem 0.6rem;
|
||||
border: 2px solid #e0e7ff;
|
||||
padding: 4px 3px;
|
||||
border: 1px solid #e0e7ff;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #e0e7ff;
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.summary-row td {
|
||||
@@ -179,22 +191,50 @@
|
||||
}
|
||||
|
||||
.grand-total-row td:last-child {
|
||||
/* border-top: 3px solid #6366f1; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.discount-highlight {
|
||||
color: #d32f2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #ff9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.signatures {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
border-top: 2px solid #6366f1;
|
||||
height: 200px;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-top: 1.5px solid #6366f1;
|
||||
height: 80px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.sign-item {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
gap: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -203,37 +243,18 @@
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.grid-row {
|
||||
grid-template-columns: 80px 1fr;
|
||||
}
|
||||
.doc-info {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.buyer-row {
|
||||
grid-template-columns: 80px 1fr;
|
||||
}
|
||||
.signatures {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.qr-box {
|
||||
position: static;
|
||||
margin: 2rem auto;
|
||||
transform: none;
|
||||
}
|
||||
.discount-section {
|
||||
padding: 8px;
|
||||
border-top: 1.5px solid #e0e7ff;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.info-flex,
|
||||
.signatures {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.title-row {
|
||||
font-size: 1.4rem;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #777;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -242,80 +263,114 @@
|
||||
|
||||
<div class="main-container">
|
||||
<!-- QR -->
|
||||
<div class="qr-box">
|
||||
<img src="qr-code.png" alt="QR" />
|
||||
</div>
|
||||
{% comment %} <div class="qr-box">
|
||||
<img src="{{ qr_code_path }}" alt="QR" />
|
||||
</div> {% endcomment %}
|
||||
|
||||
<!-- Header -->
|
||||
<div class="title-row">
|
||||
<div class="text-end" style="width: 100%;display: flex;justify-content: end;">صورت حساب الکترونیکی</div>
|
||||
<div>
|
||||
<img src="logo2.png" alt="Logo" />
|
||||
<img src="{{ logo_path }}" alt="Logo" />
|
||||
</div>
|
||||
<div class="text-start" style="width: 100%;display: flex;justify-content: start;">فروشگاه هیملز</div>
|
||||
</div>
|
||||
|
||||
<!-- Seller + Document Info -->
|
||||
<div class="grid-row">
|
||||
<div class="vertical-label">فروشگاه<br />هی ملز</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item">
|
||||
<span>فرستنده :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شناسه ملی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره ثبت :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره مجوز :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>نشانی شرکت :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تلفن و فکس :</span><span>مقدار</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left: Document Info (شماره فاکتور) -->
|
||||
<div class="info-panel">
|
||||
<div class="doc-info">
|
||||
<div class="info-item">
|
||||
<span>شماره فاکتور :</span><span>مقدار</span>
|
||||
<span>شماره فاکتور :</span><span>{{ order_number }}</span>
|
||||
</div>
|
||||
<div class="info-item"><span>تاریخ :</span><span>مقدار</span></div>
|
||||
<div class="info-item">
|
||||
<span>شماره پیگیری :</span><span>مقدار</span>
|
||||
<span>تاریخ :</span><span>{{ created_at_jalali|default:"---" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>وضعیت پرداخت :</span>
|
||||
<span>
|
||||
{% if is_paid %}
|
||||
<span class="status-badge status-paid">پرداخت شده</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-unpaid">پرداخت نشده</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>وضعیت سفارش :</span>
|
||||
<span><span class="status-badge status-pending">{{ status }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle: Seller Info -->
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item">
|
||||
<span>فرستنده :</span><span>فروشگاه هیملز</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شناسه ملی :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره ثبت :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره مجوز :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>نشانی شرکت :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تلفن و فکس :</span><span>---</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Vertical Label -->
|
||||
<div class="vertical-label">هیملز</div>
|
||||
</div>
|
||||
|
||||
<!-- Buyer -->
|
||||
<div class="buyer-row">
|
||||
<div class="vertical-label">خریدار</div>
|
||||
<div class="info-panel">
|
||||
|
||||
<div class="info-flex">
|
||||
<div class="info-item"><span>خریدار :</span><span>مقدار</span></div>
|
||||
{% if user %}
|
||||
<div class="info-item">
|
||||
<span>شماره ملی :</span><span>مقدار</span>
|
||||
<span>خریدار :</span><span>{{ user.first_name }} {{ user.last_name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره تماس :</span><span>مقدار</span>
|
||||
<span>ایمیل :</span><span>{{ user.email|default:"---" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>مقدار</span>
|
||||
<span>شماره تماس :</span><span>{{ user.phone }}</span>
|
||||
</div>
|
||||
<div class="info-item"><span>نشانی :</span><span>مقدار</span></div>
|
||||
{% endif %}
|
||||
{% if address %}
|
||||
<div class="info-item">
|
||||
<span>نام گیرنده :</span><span>{{ address.name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>{{ address.postal_code }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شهر/استان :</span><span>{{ address.city }}، {{ address.province }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تلفن :</span><span>{{ address.phone }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>نشانی :</span><span>{{ address.address }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-label">خریدار</div>
|
||||
</div>
|
||||
|
||||
<!-- Table + Footer -->
|
||||
@@ -324,70 +379,121 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>شناسه کالا یا خدمات</th>
|
||||
<th>شرح کالا یا خدمات</th>
|
||||
<th>نام محصول</th>
|
||||
<th>تنوع</th>
|
||||
<th>تعداد</th>
|
||||
<th>مبلغ واحد (تومان)</th>
|
||||
<th>مبلغ کل (تومان)</th>
|
||||
<th>تخفیف (تومان)</th>
|
||||
<th>مبلغ کل پس از تخفیف (تومان)</th>
|
||||
<th>جمع مالیات و عوارض ارزش افزوده (تومان)</th>
|
||||
<th>جمع کل پس از تخفیف و مالیات و عوارض (تومان)</th>
|
||||
<th>قیمت واحد (تومان)</th>
|
||||
<th>جمع (تومان)</th>
|
||||
<th>تخفیف محصول</th>
|
||||
<th>تخفیف ویژه (تومان)</th>
|
||||
<th>قیمت نهایی (تومان)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- placeholder row -->
|
||||
{% for item_data in items_with_discount %}
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>{{ forloop.counter }}</td>
|
||||
<td>{{ item_data.item.product.product.name }}</td>
|
||||
<td>{{ item_data.item.product.title }}</td>
|
||||
<td>{{ item_data.item.quantity }}</td>
|
||||
<td>{{ item_data.unit_price|price_format }}</td>
|
||||
<td>{{ item_data.price_before_discount|price_format }}</td>
|
||||
<td class="discount-highlight">
|
||||
{% if item_data.item.discount_percent > 0 %}
|
||||
{{ item_data.item.discount_percent }}% ({{ item_data.discount_amount|price_format }})
|
||||
{% else %}
|
||||
---
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="discount-highlight">
|
||||
{% if item_data.item.special_discount_amount > 0 %}
|
||||
{{ item_data.item.special_discount_amount|price_format }}
|
||||
{% else %}
|
||||
---
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ item_data.final_price|price_format }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
<tr class="summary-row">
|
||||
<td colspan="3">جمع کل</td>
|
||||
<td>{{ total_items }}</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>{{ subtotal|price_format }}</td>
|
||||
<td class="discount-highlight">
|
||||
{% if items_discount_amount > 0 %}
|
||||
-{{ items_discount_amount|price_format }}
|
||||
{% else %}
|
||||
0
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="discount-highlight">
|
||||
{% if special_discount_total > 0 %}
|
||||
-{{ special_discount_total|price_format }}
|
||||
{% else %}
|
||||
0
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>---</td>
|
||||
</tr>
|
||||
|
||||
{% if discount_amount > 0 %}
|
||||
<tr class="summary-row">
|
||||
<td colspan="8" style="text-align: center;">
|
||||
تخفیف کد تخفیف
|
||||
{% if discount_code %}({{ discount_code.code }} - {{ discount_code.percent }}%){% endif %}
|
||||
</td>
|
||||
<td class="discount-highlight">-{{ discount_amount|price_format }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
<tr class="summary-row">
|
||||
<td colspan="8" style="text-align: center;">
|
||||
مالیات ({{ tax_rate }}%)
|
||||
</td>
|
||||
<td>{{ tax|price_format }}</td>
|
||||
</tr>
|
||||
|
||||
<tr class="grand-total-row">
|
||||
<td colspan="9" style="text-align: center; border-left: none">
|
||||
<td colspan="8" style="text-align: center; border-left: none">
|
||||
جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (تومان)
|
||||
</td>
|
||||
<td>---</td>
|
||||
<td><strong>{{ final_price|price_format }}</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="signatures">
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای فروشگاه :</span><span>مقدار</span>
|
||||
<span>مهر و امضای فروشگاه :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>تاریخ تحویل :</span><span>مقدار</span>
|
||||
<span>تاریخ تحویل :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>ساعت تحویل :</span><span>مقدار</span>
|
||||
<span>ساعت تحویل :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>روش های پرداخت :</span><span>مقدار</span>
|
||||
<span>روش های پرداخت :</span>
|
||||
<span>
|
||||
{% if is_paid %}
|
||||
پرداخت شده
|
||||
{% else %}
|
||||
پرداخت نشده
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای خریدار :</span><span>مقدار</span>
|
||||
<span>مهر و امضای خریدار :</span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>با تشکر از خرید شما</p>
|
||||
<p>این فاکتور به صورت الکترونیکی صادر شده و نیازی به امضا و مهر ندارد</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,555 @@
|
||||
{% load price_filters %}
|
||||
<!doctype html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>فاکتور فروشگاه - {{ shop_order_id }}</title>
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
margin: 8mm;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
font-family: 'Vazir', 'Tahoma', Arial, sans-serif;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.pattern-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
background: url("{{ logo_pattern_path }}") repeat;
|
||||
background-size: 100px;
|
||||
opacity: 0.04;
|
||||
transform: rotate(12deg);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1.5px solid #6366f1;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.qr-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #6366f1;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-row img {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.shop-banner {
|
||||
direction: rtl;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.shop-banner h3 {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shop-banner p {
|
||||
font-size: 9px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
direction: ltr;
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr 50px;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.vertical-label {
|
||||
background: #e0e7ff;
|
||||
border: 1.5px solid #6366f1;
|
||||
color: #6366f1;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
direction: rtl;
|
||||
padding: 4px 2px;
|
||||
font-size: 9px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: white;
|
||||
border: 1.5px solid #6366f1;
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
direction: rtl;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
white-space: nowrap;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.info-item span:first-child {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.doc-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.buyer-row {
|
||||
direction: ltr;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 50px;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
border: 1.5px solid #6366f1;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 4px 3px;
|
||||
border: 1px solid #e0e7ff;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #e0e7ff;
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.summary-row td {
|
||||
background: #f1f5f9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grand-total-row {
|
||||
background: #e0e7ff;
|
||||
}
|
||||
|
||||
.grand-total-row td:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.payable-row {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.payable-row td {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.discount-highlight {
|
||||
color: #d32f2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.commission-highlight {
|
||||
color: #1976d2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #ff9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-settled {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.signatures {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-top: 1.5px solid #6366f1;
|
||||
height: 80px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.sign-item {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sign-item span:first-child {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #777;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pattern-bg"></div>
|
||||
|
||||
<div class="main-container">
|
||||
<!-- QR -->
|
||||
{% comment %} <div class="qr-box">
|
||||
<img src="{{ qr_code_path }}" alt="QR" />
|
||||
</div> {% endcomment %}
|
||||
|
||||
<!-- Header -->
|
||||
<div class="title-row">
|
||||
<div class="text-end" style="width: 100%;display: flex;justify-content: end;">فاکتور فروشگاه</div>
|
||||
<div>
|
||||
<img src="{{ logo_path }}" alt="Logo" />
|
||||
</div>
|
||||
<div class="text-start" style="width: 100%;display: flex;justify-content: start;">
|
||||
سفارش: {{ order_number }} | فاکتور: {{ shop_order_id }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shop Banner -->
|
||||
<div class="shop-banner">
|
||||
<div>
|
||||
<h3>{{ shop.shop_name }}</h3>
|
||||
{% if shop.shop_description %}
|
||||
<p>{{ shop.shop_description|truncatewords:10 }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p style="font-size: 10px; font-weight: bold;">کمیسیون: {{ commission_percent }}%</p>
|
||||
</div>
|
||||
|
||||
<!-- Seller + Document Info -->
|
||||
<div class="grid-row">
|
||||
<!-- Left: Document Info -->
|
||||
<div class="info-panel">
|
||||
<div class="doc-info">
|
||||
<div class="info-item">
|
||||
<span>شماره سفارش اصلی :</span><span>{{ order_number }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره فاکتور فروشگاه :</span><span>{{ shop_order_id }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تاریخ :</span><span>{{ created_at_jalali|default:"---" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>وضعیت پرداخت :</span>
|
||||
<span>
|
||||
{% if is_paid %}
|
||||
<span class="status-badge status-paid">پرداخت شده</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-unpaid">پرداخت نشده</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>وضعیت سفارش :</span>
|
||||
<span><span class="status-badge status-pending">{{ status }}</span></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>وضعیت تسویه :</span>
|
||||
<span>
|
||||
{% if is_settled %}
|
||||
<span class="status-badge status-settled">تسویه شده</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-unpaid">تسویه نشده</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle: Seller Info -->
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item">
|
||||
<span>فرستنده :</span><span>{{ shop.shop_name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شناسه ملی :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره ثبت :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره مجوز :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>نشانی شرکت :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تلفن و فکس :</span><span>---</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Vertical Label -->
|
||||
<div class="vertical-label">فروشگاه</div>
|
||||
</div>
|
||||
|
||||
<!-- Buyer -->
|
||||
<div class="buyer-row">
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item">
|
||||
<span>خریدار :</span><span>{{ customer_name|default:"---" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره تماس :</span><span>{{ customer_phone|default:"---" }}</span>
|
||||
</div>
|
||||
{% if address_recipient_name %}
|
||||
<div class="info-item">
|
||||
<span>نام گیرنده :</span><span>{{ address_recipient_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if address_postal_code %}
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>{{ address_postal_code }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if address_city %}
|
||||
<div class="info-item">
|
||||
<span>شهر/استان :</span><span>{{ address_city }}، {{ address_province }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if address_phone %}
|
||||
<div class="info-item">
|
||||
<span>تلفن :</span><span>{{ address_phone }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if address_text %}
|
||||
<div class="info-item">
|
||||
<span>نشانی :</span><span>{{ address_text }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-label">خریدار</div>
|
||||
</div>
|
||||
|
||||
<!-- Table + Footer -->
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>نام محصول</th>
|
||||
<th>تنوع</th>
|
||||
<th>تعداد</th>
|
||||
<th>قیمت واحد (تومان)</th>
|
||||
<th>جمع (تومان)</th>
|
||||
<th>تخفیف محصول</th>
|
||||
<th>تخفیف ویژه (تومان)</th>
|
||||
<th>قیمت نهایی (تومان)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item_data in items_with_discount %}
|
||||
<tr>
|
||||
<td>{{ forloop.counter }}</td>
|
||||
<td>{{ item_data.order_item.product.product.name }}</td>
|
||||
<td>{{ item_data.order_item.product.title }}</td>
|
||||
<td>{{ item_data.item.quantity }}</td>
|
||||
<td>{{ item_data.unit_price|price_format }}</td>
|
||||
<td>{{ item_data.price_before_discount|price_format }}</td>
|
||||
<td class="discount-highlight">
|
||||
{% if item_data.order_item.discount_percent > 0 %}
|
||||
{{ item_data.order_item.discount_percent }}% ({{ item_data.discount_amount|price_format }})
|
||||
{% else %}
|
||||
---
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="discount-highlight">
|
||||
{% if item_data.special_discount_amount > 0 %}
|
||||
{{ item_data.special_discount_amount|price_format }}
|
||||
{% else %}
|
||||
---
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ item_data.final_price|price_format }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
<tr class="summary-row">
|
||||
<td colspan="3">جمع کل</td>
|
||||
<td>{{ total_items }}</td>
|
||||
<td>---</td>
|
||||
<td>{{ subtotal|price_format }}</td>
|
||||
<td class="discount-highlight">
|
||||
{% if items_discount_amount > 0 %}
|
||||
-{{ items_discount_amount|price_format }}
|
||||
{% else %}
|
||||
0
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="discount-highlight">
|
||||
{% if special_discount_total > 0 %}
|
||||
-{{ special_discount_total|price_format }}
|
||||
{% else %}
|
||||
0
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>---</td>
|
||||
</tr>
|
||||
|
||||
<tr class="summary-row">
|
||||
<td colspan="8" style="text-align: center;" class="commission-highlight">
|
||||
کمیسیون ({{ commission_percent }}%)
|
||||
</td>
|
||||
<td class="commission-highlight">-{{ commission_amount|price_format }}</td>
|
||||
</tr>
|
||||
|
||||
<tr class="grand-total-row payable-row">
|
||||
<td colspan="8" style="text-align: center; border-left: none">
|
||||
قیمت نهایی (قابل پرداخت به فروشگاه) (تومان)
|
||||
</td>
|
||||
<td><strong>{{ payable_amount|price_format }}</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="signatures">
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای فروشگاه :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>تاریخ تحویل :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>ساعت تحویل :</span><span></span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>روش های پرداخت :</span>
|
||||
<span>
|
||||
{% if is_paid %}
|
||||
پرداخت شده
|
||||
{% else %}
|
||||
پرداخت نشده
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای خریدار :</span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>با تشکر از همکاری شما</p>
|
||||
<p>این فاکتور به صورت الکترونیکی صادر شده و نیازی به امضا و مهر ندارد</p>
|
||||
<p>در صورت هرگونه سوال یا مشکل با پشتیبانی تماس بگیرید</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user