revision 1

This commit is contained in:
Flatlogic Bot 2026-02-06 06:32:17 +00:00
parent 54a353ee6a
commit bdde0c2da9
26 changed files with 829 additions and 423 deletions

View File

@ -18,20 +18,50 @@
</a> </a>
</div> </div>
{% for entry in entries %} <div class="card border-0 shadow-sm">
<div class="card border-0 shadow-sm mb-4"> <div class="card-body p-0">
<div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
<div>
<span class="text-muted small">{% trans "Date" %}:</span> <strong>{{ entry.date }}</strong>
<span class="ms-3 text-muted small">{% trans "Reference" %}:</span> <code>{{ entry.reference }}</code>
</div>
<div class="text-muted small">#{{ entry.id }}</div>
</div>
<div class="card-body">
<p class="mb-3"><strong>{% trans "Description" %}:</strong> {{ entry.description }}</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm table-bordered mb-0"> <table class="table table-hover align-middle mb-0">
<thead class="bg-light"> <thead class="bg-light">
<tr>
<th class="ps-4">{% trans "Date" %}</th>
<th>{% trans "Ref #" %}</th>
<th>{% trans "Description" %}</th>
<th class="text-end">{% trans "Debit" %}</th>
<th class="text-end">{% trans "Credit" %}</th>
<th class="text-end pe-4">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td class="ps-4 text-nowrap">{{ entry.date }}</td>
<td>
{% if entry.reference %}
<span class="badge bg-light text-dark border">{{ entry.reference }}</span>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>{{ entry.description|truncatechars:60 }}</td>
<td class="text-end fw-bold text-success">{{ entry.total_debit|floatformat:global_settings.decimal_places }}</td>
<td class="text-end fw-bold text-danger">{{ entry.total_credit|floatformat:global_settings.decimal_places }}</td>
<td class="text-end pe-4">
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#entry-details-{{ entry.id }}" aria-expanded="false">
<i class="bi bi-eye"></i> {% trans "View" %}
</button>
</td>
</tr>
<!-- Details Row -->
<tr class="collapse bg-light" id="entry-details-{{ entry.id }}">
<td colspan="6" class="p-0">
<div class="p-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0 text-muted small text-uppercase fw-bold">{% trans "Transaction Details" %} #{{ entry.id }}</h6>
<small class="text-muted">{% trans "Created" %}: {{ entry.created_at|date:"Y-m-d H:i" }}</small>
</div>
<table class="table table-sm table-bordered bg-white mb-0">
<thead>
<tr> <tr>
<th>{% trans "Account" %}</th> <th>{% trans "Account" %}</th>
<th class="text-end" style="width: 150px;">{% trans "Debit" %}</th> <th class="text-end" style="width: 150px;">{% trans "Debit" %}</th>
@ -42,13 +72,13 @@
{% for item in entry.items.all %} {% for item in entry.items.all %}
<tr> <tr>
<td> <td>
{{ item.account.code }} - <span class="fw-medium">{{ item.account.code }}</span> -
{% if LANGUAGE_CODE == 'ar' %}{{ item.account.name_ar }}{% else %}{{ item.account.name_en }}{% endif %} {% if LANGUAGE_CODE == 'ar' %}{{ item.account.name_ar }}{% else %}{{ item.account.name_en }}{% endif %}
</td> </td>
<td class="text-end"> <td class="text-end text-success">
{% if item.type == 'debit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %} {% if item.type == 'debit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
</td> </td>
<td class="text-end"> <td class="text-end text-danger">
{% if item.type == 'credit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %} {% if item.type == 'credit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
</td> </td>
</tr> </tr>
@ -56,14 +86,19 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="6" class="text-center py-5 text-muted">
{% trans "No journal entries found." %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
{% empty %}
<div class="card border-0 shadow-sm">
<div class="card-body text-center py-5">
<p class="text-muted mb-0">{% trans "No journal entries found." %}</p>
</div>
</div>
{% endfor %}
</div> </div>
{% endblock %} {% endblock %}

View File

@ -69,7 +69,10 @@ def account_create_update(request, pk=None):
@login_required @login_required
def journal_entries(request): def journal_entries(request):
entries = JournalEntry.objects.all().order_by('-date', '-id') entries = JournalEntry.objects.annotate(
total_debit=Sum('items__amount', filter=Q(items__type='debit')),
total_credit=Sum('items__amount', filter=Q(items__type='credit'))
).prefetch_related('items__account').order_by('-date', '-id')
return render(request, 'accounting/journal_entries.html', {'entries': entries}) return render(request, 'accounting/journal_entries.html', {'entries': entries})
@login_required @login_required

View File

@ -320,6 +320,29 @@
</li> </li>
{% endif %} {% endif %}
<!-- Account Group (Visible to all) -->
<li class="sidebar-group-header mt-2">
<a href="#accountSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'profile' %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Account" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'profile' %}show{% endif %}" id="accountSubmenu">
<li>
<a href="{% url 'profile' %}" class="{% if url_name == 'profile' %}active{% endif %}">
<i class="bi bi-person"></i> {% trans "My Profile" %}
</a>
</li>
<li>
<form action="{% url 'logout' %}" method="post" id="logout-form">
{% csrf_token %}
<a href="#" onclick="document.getElementById('logout-form').submit(); return false;">
<i class="bi bi-box-arrow-right"></i> {% trans "Logout" %}
</a>
</form>
</li>
</ul>
</li>
{% endwith %} {% endwith %}
</ul> </ul>
</nav> </nav>
@ -327,85 +350,15 @@
<!-- Page Content --> <!-- Page Content -->
<div id="content" {% if not user.is_authenticated %}style="margin-left: 0; width: 100%;"{% endif %}> <div id="content" {% if not user.is_authenticated %}style="margin-left: 0; width: 100%;"{% endif %}>
<nav class="navbar navbar-expand-lg top-navbar sticky-top">
<div class="container-fluid">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<button type="button" id="sidebarCollapse" class="btn btn-light me-3"> <div class="p-3">
<i class="bi bi-list"></i> <button type="button" id="sidebarCollapse" class="btn btn-light shadow-sm">
<i class="bi bi-list fs-5"></i>
</button> </button>
</div>
{% endif %} {% endif %}
<div class="ms-auto d-flex align-items-center"> <main class="p-4 pt-0">
<!-- Language Switcher -->
<div class="me-3">
<form action="{% url 'set_language' %}" method="post" id="lang-switcher-form">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path }}">
<div class="input-group input-group-sm">
<span class="input-group-text bg-light border-0 rounded-start-pill pe-0">
<i class="bi bi-translate text-muted"></i>
</span>
<select name="language" onchange="this.form.submit()" class="form-select form-select-sm border-0 bg-light rounded-end-pill ps-2 pe-4" style="width: auto; cursor: pointer;">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %}selected{% endif %}>
{{ language.name_local }}
</option>
{% endfor %}
</select>
</div>
</form>
</div>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle d-flex align-items-center rounded-pill px-3" type="button" id="userDropdown" data-bs-toggle="dropdown">
{% if user.is_authenticated and user.profile.image %}
<img src="{{ user.profile.image.url }}" alt="{{ user.username }}" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover;">
{% else %}
<i class="bi bi-person-circle fs-5 me-2"></i>
{% endif %}
<span>{% if user.is_authenticated %}{{ user.username }}{% else %}{% trans "Guest" %}{% endif %}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow-lg border-0 mt-2 rounded-4 overflow-hidden">
{% if user.is_authenticated %}
<li class="px-3 py-2 bg-light d-flex align-items-center">
{% if user.profile.image %}
<img src="{{ user.profile.image.url }}" alt="{{ user.username }}" class="rounded-circle me-3" style="width: 40px; height: 40px; object-fit: cover;">
{% else %}
<div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
<i class="bi bi-person-fill"></i>
</div>
{% endif %}
<div>
<div class="fw-bold small">{{ user.get_full_name|default:user.username }}</div>
<div class="text-muted" style="font-size: 0.7rem;">{{ user.email|truncatechars:20 }}</div>
</div>
</li>
<li><hr class="dropdown-divider m-0"></li>
<li><a class="dropdown-item py-2" href="{% url 'profile' %}"><i class="bi bi-person me-2"></i> {% trans "My Profile" %}</a></li>
{% if user.is_superuser or user.is_staff %}
<li><a class="dropdown-item py-2" href="{% url 'settings' %}"><i class="bi bi-gear me-2"></i> {% trans "System Settings" %}</a></li>
{% endif %}
<li><hr class="dropdown-divider m-0"></li>
<li>
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button type="submit" class="dropdown-item text-danger py-2 border-0 bg-transparent w-100 text-start">
<i class="bi bi-box-arrow-right me-2"></i> {% trans "Logout" %}
</button>
</form>
</li>
{% else %}
<li><a class="dropdown-item" href="{% url 'login' %}"><i class="bi bi-box-arrow-in-right me-2"></i> {% trans "Login" %}</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</nav>
<main class="p-4">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
</div> </div>
@ -417,15 +370,17 @@
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
const sidebarCollapse = document.getElementById('sidebarCollapse'); const sidebarCollapse = document.getElementById('sidebarCollapse');
if (sidebarCollapse) {
sidebarCollapse.addEventListener('click', function (e) { sidebarCollapse.addEventListener('click', function (e) {
e.stopPropagation(); e.stopPropagation();
sidebar.classList.toggle('active'); sidebar.classList.toggle('active');
}); });
}
// Close sidebar when clicking outside on mobile // Close sidebar when clicking outside on mobile
document.addEventListener('click', function (e) { document.addEventListener('click', function (e) {
if (window.innerWidth <= 992 && sidebar.classList.contains('active')) { if (window.innerWidth <= 992 && sidebar && sidebar.classList.contains('active')) {
if (!sidebar.contains(e.target) && e.target !== sidebarCollapse) { if (!sidebar.contains(e.target) && e.target !== sidebarCollapse && !sidebarCollapse.contains(e.target)) {
sidebar.classList.remove('active'); sidebar.classList.remove('active');
} }
} }

View File

@ -31,18 +31,18 @@
</div> </div>
<!-- Invoice Content --> <!-- Invoice Content -->
<div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
@ -52,10 +52,10 @@
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end" dir="rtl"> <div class="col-sm-6 text-sm-end" dir="rtl">
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4" dir="ltr">{% trans "Tax Invoice" %} / فاتورة ضريبية</h1> <h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4 print-mb-2 print-h1" dir="ltr">{% trans "Tax Invoice" %} / فاتورة ضريبية</h1>
<div class="mb-4 text-sm-end" dir="ltr"> <div class="mb-4 print-mb-2 text-sm-end" dir="ltr">
<div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div> <div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div>
<div class="h5">{{ sale.invoice_number|default:sale.id }}</div> <div class="h5 print-h5">{{ sale.invoice_number|default:sale.id }}</div>
</div> </div>
<div class="row g-3 text-sm-end" dir="ltr"> <div class="row g-3 text-sm-end" dir="ltr">
<div class="col-6"> <div class="col-6">
@ -70,10 +70,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Customer Information" %} / معلومات العميل</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Customer Information" %} / معلومات العميل</div>
<div class="h5 fw-bold mb-1">{{ sale.customer.name|default:_("Guest Customer") }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ sale.customer.name|default:_("Guest Customer") }}</div>
{% if sale.customer.phone %} {% if sale.customer.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ sale.customer.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ sale.customer.phone }}</div>
{% endif %} {% endif %}
@ -82,37 +82,37 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Payment Status" %} / حالة الدفع</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Payment Status" %} / حالة الدفع</div>
<div> <div>
{% if sale.status == 'paid' %} {% if sale.status == 'paid' %}
<span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Fully Paid" %} / مدفوع بالكامل</span> <span class="h5 badge bg-success text-white rounded-pill px-4 print-badge">{% trans "Fully Paid" %} / مدفوع بالكامل</span>
{% elif sale.status == 'partial' %} {% elif sale.status == 'partial' %}
<span class="h5 badge bg-warning text-dark rounded-pill px-4">{% trans "Partially Paid" %} / مدفوع جزئياً</span> <span class="h5 badge bg-warning text-dark rounded-pill px-4 print-badge">{% trans "Partially Paid" %} / مدفوع جزئياً</span>
{% else %} {% else %}
<span class="h5 badge bg-danger text-white rounded-pill px-4">{% trans "Unpaid" %} / غير مدفوع</span> <span class="h5 badge bg-danger text-white rounded-pill px-4 print-badge">{% trans "Unpaid" %} / غير مدفوع</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Unit Price" %}</div> <div class="small text-muted">{% trans "Unit Price" %}</div>
<div class="small">سعر الوحدة</div> <div class="small">سعر الوحدة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -121,74 +121,74 @@
<tbody> <tbody>
{% for item in sale.items.all %} {% for item in sale.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-primary">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-primary print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Subtotal" %}</div> <div>{% trans "Subtotal" %}</div>
<div class="small fw-normal">المجموع الفرعي</div> <div class="small fw-normal">المجموع الفرعي</div>
</td> </td>
<td class="text-end pe-4 py-3 fw-bold border-top">{{ settings.currency_symbol }}{{ sale.subtotal|floatformat:3 }}</td> <td class="text-end pe-4 py-3 fw-bold border-top print-py-1">{{ settings.currency_symbol }}{{ sale.subtotal|floatformat:3 }}</td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold text-muted"> <td class="text-center py-2 fw-bold text-muted print-py-1">
<div>{% trans "VAT" %}</div> <div>{% trans "VAT" %}</div>
<div class="small fw-normal">الضريبة</div> <div class="small fw-normal">الضريبة</div>
</td> </td>
<td class="text-end pe-4 py-2 fw-bold text-muted">{{ settings.currency_symbol }}{{ sale.vat_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-2 fw-bold text-muted print-py-1">{{ settings.currency_symbol }}{{ sale.vat_amount|floatformat:3 }}</td>
</tr> </tr>
{% if sale.discount > 0 %} {% if sale.discount > 0 %}
<tr class="text-muted"> <tr class="text-muted">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold"> <td class="text-center py-2 fw-bold print-py-1">
<div>{% trans "Discount" %}</div> <div>{% trans "Discount" %}</div>
<div class="small fw-normal">الخصم</div> <div class="small fw-normal">الخصم</div>
</td> </td>
<td class="text-end pe-4 py-2 fw-bold">-{{ settings.currency_symbol }}{{ sale.discount|floatformat:3 }}</td> <td class="text-end pe-4 py-2 fw-bold print-py-1">-{{ settings.currency_symbol }}{{ sale.discount|floatformat:3 }}</td>
</tr> </tr>
{% endif %} {% endif %}
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold"> <td class="text-center py-3 fw-bold print-py-1">
<div>{% trans "Grand Total" %}</div> <div>{% trans "Grand Total" %}</div>
<div class="small fw-normal">المجموع الكلي</div> <div class="small fw-normal">المجموع الكلي</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-primary">{{ settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-primary print-py-1 print-h5">{{ settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td>
</tr> </tr>
<tr class="text-success"> <tr class="text-success">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold"> <td class="text-center py-2 fw-bold print-py-1">
<div>{% trans "Total Paid" %}</div> <div>{% trans "Total Paid" %}</div>
<div class="small fw-normal">إجمالي المدفوع</div> <div class="small fw-normal">إجمالي المدفوع</div>
</td> </td>
<td class="text-end pe-4 py-2 fw-bold">{{ settings.currency_symbol }}{{ sale.paid_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-2 fw-bold print-py-1">{{ settings.currency_symbol }}{{ sale.paid_amount|floatformat:3 }}</td>
</tr> </tr>
<tr class="text-danger"> <tr class="text-danger">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold border-top"> <td class="text-center py-2 fw-bold border-top print-py-1">
<div>{% trans "Balance Due" %}</div> <div>{% trans "Balance Due" %}</div>
<div class="small fw-normal">الرصيد المستحق</div> <div class="small fw-normal">الرصيد المستحق</div>
</td> </td>
<td class="text-end pe-4 py-2 h5 fw-bold border-top">{{ settings.currency_symbol }}{{ sale.balance_due|floatformat:3 }}</td> <td class="text-end pe-4 py-2 h5 fw-bold border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ sale.balance_due|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<!-- Amount in Words --> <!-- Amount in Words -->
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<div class="p-3 bg-light rounded-3"> <div class="p-3 bg-light rounded-3 print-bg-none print-p-0">
<div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div> <div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
<div class="fw-bold text-dark">{{ amount_in_words }}</div> <div class="fw-bold text-dark">{{ amount_in_words }}</div>
</div> </div>
@ -196,11 +196,11 @@
<!-- Payment History --> <!-- Payment History -->
{% if sale.payments.exists %} {% if sale.payments.exists %}
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<h5 class="fw-bold mb-3"><i class="bi bi-credit-card me-2"></i>{% trans "Payment Records" %} / سجلات الدفع</h5> <h5 class="fw-bold mb-3 print-h5"><i class="bi bi-credit-card me-2"></i>{% trans "Payment Records" %} / سجلات الدفع</h5>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm table-bordered"> <table class="table table-sm table-bordered table-sm-print">
<thead class="bg-light small"> <thead class="bg-light small print-bg-none">
<tr> <tr>
<th>{% trans "Date" %} / التاريخ</th> <th>{% trans "Date" %} / التاريخ</th>
<th>{% trans "Method" %} / الطريقة</th> <th>{% trans "Method" %} / الطريقة</th>
@ -233,13 +233,13 @@
<!-- Notes --> <!-- Notes -->
{% if sale.notes %} {% if sale.notes %}
<div class="bg-light p-4 rounded-3 mb-5 mx-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Internal Notes" %} / ملاحظات داخلية</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Internal Notes" %} / ملاحظات داخلية</h6>
<p class="mb-0 small">{{ sale.notes }}</p> <p class="mb-0 small">{{ sale.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4 pb-5"> <div class="text-center text-muted small mt-5 border-top pt-4 pb-5 print-mt-2 print-pt-2 print-pb-0">
<p class="mb-1">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p> <p class="mb-1">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p>
<p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p> <p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p>
</div> </div>
@ -333,32 +333,70 @@ document.addEventListener("DOMContentLoaded", function() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#invoice-card { #invoice-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@ -29,28 +29,28 @@
</div> </div>
<!-- Invoice Content --> <!-- Invoice Content -->
<div id="order-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="order-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4">{% trans "Purchase Order" %} / أمر شراء</h1> <h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4 print-mb-2 print-h1">{% trans "Purchase Order" %} / أمر شراء</h1>
<div class="mb-4"> <div class="mb-4 print-mb-2">
<div class="fw-bold text-dark text-uppercase small">{% trans "LPO Number" %} / رقم الأمر</div> <div class="fw-bold text-dark text-uppercase small">{% trans "LPO Number" %} / رقم الأمر</div>
<div class="h5">{{ order.lpo_number|default:order.id }}</div> <div class="h5 print-h5">{{ order.lpo_number|default:order.id }}</div>
</div> </div>
<div class="row g-3"> <div class="row g-3">
<div class="col-4"> <div class="col-4">
@ -69,10 +69,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Supplier Information" %} / معلومات المورد</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Supplier Information" %} / معلومات المورد</div>
<div class="h5 fw-bold mb-1">{{ order.supplier.name }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ order.supplier.name }}</div>
{% if order.supplier.phone %} {% if order.supplier.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ order.supplier.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ order.supplier.phone }}</div>
{% endif %} {% endif %}
@ -81,37 +81,37 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Order Status" %} / حالة الطلب</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Order Status" %} / حالة الطلب</div>
<div> <div>
{% if order.status == 'converted' %} {% if order.status == 'converted' %}
<span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Converted" %} / تم التحويل</span> <span class="h5 badge bg-success text-white rounded-pill px-4 print-badge">{% trans "Converted" %} / تم التحويل</span>
{% elif order.status == 'sent' %} {% elif order.status == 'sent' %}
<span class="h5 badge bg-info text-white rounded-pill px-4">{% trans "Sent" %} / مرسل</span> <span class="h5 badge bg-info text-white rounded-pill px-4 print-badge">{% trans "Sent" %} / مرسل</span>
{% else %} {% else %}
<span class="h5 badge bg-secondary text-white rounded-pill px-4">{% trans "Draft" %} / مسودة</span> <span class="h5 badge bg-secondary text-white rounded-pill px-4 print-badge">{% trans "Draft" %} / مسودة</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Cost Price" %}</div> <div class="small text-muted">{% trans "Cost Price" %}</div>
<div class="small">سعر التكلفة</div> <div class="small">سعر التكلفة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -120,32 +120,32 @@
<tbody> <tbody>
{% for item in order.items.all %} {% for item in order.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-primary">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-primary print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Grand Total" %}</div> <div>{% trans "Grand Total" %}</div>
<div class="small fw-normal">المجموع الكلي</div> <div class="small fw-normal">المجموع الكلي</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top">{{ settings.currency_symbol }}{{ order.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ order.total_amount|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<!-- Amount in Words --> <!-- Amount in Words -->
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<div class="p-3 bg-light rounded-3"> <div class="p-3 bg-light rounded-3 print-bg-none print-p-0">
<div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div> <div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
<div class="fw-bold text-dark">{{ amount_in_words }}</div> <div class="fw-bold text-dark">{{ amount_in_words }}</div>
</div> </div>
@ -153,13 +153,13 @@
<!-- Notes --> <!-- Notes -->
{% if order.notes %} {% if order.notes %}
<div class="bg-light p-4 rounded-3 mb-5 mx-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
<p class="mb-0 small">{{ order.notes }}</p> <p class="mb-0 small">{{ order.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4 pb-5"> <div class="text-center text-muted small mt-5 border-top pt-4 pb-5 print-mt-2 print-pt-2 print-pb-0">
<p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p> <p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p>
</div> </div>
</div> </div>
@ -186,32 +186,70 @@ function downloadPDF() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#order-card { #order-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@ -21,18 +21,18 @@
</div> </div>
<!-- Invoice Content --> <!-- Invoice Content -->
<div id="purchase-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="purchase-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
@ -42,10 +42,10 @@
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4">{% trans "Purchase Invoice" %} / فاتورة مشتريات</h1> <h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4 print-mb-2 print-h1">{% trans "Purchase Invoice" %} / فاتورة مشتريات</h1>
<div class="mb-4"> <div class="mb-4 print-mb-2">
<div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div> <div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div>
<div class="h5">{{ purchase.invoice_number|default:purchase.id }}</div> <div class="h5 print-h5">{{ purchase.invoice_number|default:purchase.id }}</div>
</div> </div>
<div class="row g-3"> <div class="row g-3">
<div class="col-4"> <div class="col-4">
@ -64,10 +64,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Supplier Information" %} / معلومات المورد</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Supplier Information" %} / معلومات المورد</div>
<div class="h5 fw-bold mb-1">{{ purchase.supplier.name }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ purchase.supplier.name }}</div>
{% if purchase.supplier.phone %} {% if purchase.supplier.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase.supplier.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase.supplier.phone }}</div>
{% endif %} {% endif %}
@ -76,37 +76,37 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Payment Status" %} / حالة الدفع</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Payment Status" %} / حالة الدفع</div>
<div> <div>
{% if purchase.status == 'paid' %} {% if purchase.status == 'paid' %}
<span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Fully Paid" %} / مدفوع بالكامل</span> <span class="h5 badge bg-success text-white rounded-pill px-4 print-badge">{% trans "Fully Paid" %} / مدفوع بالكامل</span>
{% elif purchase.status == 'partial' %} {% elif purchase.status == 'partial' %}
<span class="h5 badge bg-warning text-dark rounded-pill px-4">{% trans "Partially Paid" %} / مدفوع جزئياً</span> <span class="h5 badge bg-warning text-dark rounded-pill px-4 print-badge">{% trans "Partially Paid" %} / مدفوع جزئياً</span>
{% else %} {% else %}
<span class="h5 badge bg-danger text-white rounded-pill px-4">{% trans "Unpaid" %} / غير مدفوع</span> <span class="h5 badge bg-danger text-white rounded-pill px-4 print-badge">{% trans "Unpaid" %} / غير مدفوع</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Cost Price" %}</div> <div class="small text-muted">{% trans "Cost Price" %}</div>
<div class="small">سعر التكلفة</div> <div class="small">سعر التكلفة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -115,48 +115,48 @@
<tbody> <tbody>
{% for item in purchase.items.all %} {% for item in purchase.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-primary">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-primary print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Grand Total" %}</div> <div>{% trans "Grand Total" %}</div>
<div class="small fw-normal">المجموع الكلي</div> <div class="small fw-normal">المجموع الكلي</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top">{{ settings.currency_symbol }}{{ purchase.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ purchase.total_amount|floatformat:3 }}</td>
</tr> </tr>
<tr class="text-success"> <tr class="text-success">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold"> <td class="text-center py-2 fw-bold print-py-1">
<div>{% trans "Total Paid" %}</div> <div>{% trans "Total Paid" %}</div>
<div class="small fw-normal">إجمالي المدفوع</div> <div class="small fw-normal">إجمالي المدفوع</div>
</td> </td>
<td class="text-end pe-4 py-2 fw-bold">{{ settings.currency_symbol }}{{ purchase.paid_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-2 fw-bold print-py-1">{{ settings.currency_symbol }}{{ purchase.paid_amount|floatformat:3 }}</td>
</tr> </tr>
<tr class="text-danger"> <tr class="text-danger">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold border-top"> <td class="text-center py-2 fw-bold border-top print-py-1">
<div>{% trans "Balance Due" %}</div> <div>{% trans "Balance Due" %}</div>
<div class="small fw-normal">الرصيد المستحق</div> <div class="small fw-normal">الرصيد المستحق</div>
</td> </td>
<td class="text-end pe-4 py-2 h5 fw-bold border-top">{{ settings.currency_symbol }}{{ purchase.balance_due|floatformat:3 }}</td> <td class="text-end pe-4 py-2 h5 fw-bold border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ purchase.balance_due|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<!-- Amount in Words --> <!-- Amount in Words -->
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<div class="p-3 bg-light rounded-3"> <div class="p-3 bg-light rounded-3 print-bg-none print-p-0">
<div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div> <div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
<div class="fw-bold text-dark">{{ amount_in_words }}</div> <div class="fw-bold text-dark">{{ amount_in_words }}</div>
</div> </div>
@ -164,11 +164,11 @@
<!-- Payment History --> <!-- Payment History -->
{% if purchase.payments.exists %} {% if purchase.payments.exists %}
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<h5 class="fw-bold mb-3"><i class="bi bi-credit-card me-2"></i>{% trans "Payment History" %} / سجل الدفعات</h5> <h5 class="fw-bold mb-3 print-h5"><i class="bi bi-credit-card me-2"></i>{% trans "Payment History" %} / سجل الدفعات</h5>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm table-bordered"> <table class="table table-sm table-bordered table-sm-print">
<thead class="bg-light small"> <thead class="bg-light small print-bg-none">
<tr> <tr>
<th>{% trans "Date" %} / التاريخ</th> <th>{% trans "Date" %} / التاريخ</th>
<th>{% trans "Method" %} / الطريقة</th> <th>{% trans "Method" %} / الطريقة</th>
@ -201,13 +201,13 @@
<!-- Notes --> <!-- Notes -->
{% if purchase.notes %} {% if purchase.notes %}
<div class="bg-light p-4 rounded-3 mb-5 mx-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
<p class="mb-0 small">{{ purchase.notes }}</p> <p class="mb-0 small">{{ purchase.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4 pb-5"> <div class="text-center text-muted small mt-5 border-top pt-4 pb-5 print-mt-2 print-pt-2 print-pb-0">
<p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p> <p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p>
</div> </div>
</div> </div>
@ -234,32 +234,70 @@ function downloadPDF() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#purchase-card { #purchase-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@ -21,28 +21,28 @@
</div> </div>
<!-- Return Content --> <!-- Return Content -->
<div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end" dir="rtl"> <div class="col-sm-6 text-sm-end" dir="rtl">
<h1 class="fw-bold text-uppercase text-danger opacity-50 mb-4" dir="ltr">{% trans "Purchase Return" %} / مرتجع مشتريات</h1> <h1 class="fw-bold text-uppercase text-danger opacity-50 mb-4 print-mb-2 print-h1" dir="ltr">{% trans "Purchase Return" %} / مرتجع مشتريات</h1>
<div class="mb-4 text-sm-end" dir="ltr"> <div class="mb-4 print-mb-2 text-sm-end" dir="ltr">
<div class="fw-bold text-dark text-uppercase small">{% trans "Return Number" %} / رقم المرتجع</div> <div class="fw-bold text-dark text-uppercase small">{% trans "Return Number" %} / رقم المرتجع</div>
<div class="h5">{{ purchase_return.return_number|default:purchase_return.id }}</div> <div class="h5 print-h5">{{ purchase_return.return_number|default:purchase_return.id }}</div>
</div> </div>
<div class="row g-3 text-sm-end" dir="ltr"> <div class="row g-3 text-sm-end" dir="ltr">
<div class="col-6"> <div class="col-6">
@ -57,10 +57,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Supplier Information" %} / معلومات المورد</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Supplier Information" %} / معلومات المورد</div>
<div class="h5 fw-bold mb-1">{{ purchase_return.supplier.name|default:"N/A" }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ purchase_return.supplier.name|default:"N/A" }}</div>
{% if purchase_return.supplier.phone %} {% if purchase_return.supplier.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase_return.supplier.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase_return.supplier.phone }}</div>
{% endif %} {% endif %}
@ -68,23 +68,23 @@
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Cost Price" %}</div> <div class="small text-muted">{% trans "Cost Price" %}</div>
<div class="small">سعر التكلفة</div> <div class="small">سعر التكلفة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -93,24 +93,24 @@
<tbody> <tbody>
{% for item in purchase_return.items.all %} {% for item in purchase_return.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-danger">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-danger print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Total Credit" %}</div> <div>{% trans "Total Credit" %}</div>
<div class="small fw-normal">إجمالي الرصيد المسترد</div> <div class="small fw-normal">إجمالي الرصيد المسترد</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-danger border-top">{{ settings.currency_symbol }}{{ purchase_return.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-danger border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ purchase_return.total_amount|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -118,13 +118,13 @@
<!-- Notes --> <!-- Notes -->
{% if purchase_return.notes %} {% if purchase_return.notes %}
<div class="bg-light p-4 rounded-3 mb-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
<p class="mb-0 small">{{ purchase_return.notes }}</p> <p class="mb-0 small">{{ purchase_return.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4"> <div class="text-center text-muted small mt-5 border-top pt-4 print-mt-2 print-pt-2">
<p class="mb-1">{% trans "Purchase Return Confirmation" %} / تأكيد مرتجع مشتريات</p> <p class="mb-1">{% trans "Purchase Return Confirmation" %} / تأكيد مرتجع مشتريات</p>
<p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p> <p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p>
</div> </div>
@ -152,32 +152,70 @@ function downloadPDF() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#invoice-card { #invoice-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@ -45,18 +45,18 @@
</div> </div>
<!-- Quotation Content --> <!-- Quotation Content -->
<div id="quotation-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="quotation-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
@ -66,10 +66,10 @@
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4">{% trans "Quotation" %} / عرض سعر</h1> <h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4 print-mb-2 print-h1">{% trans "Quotation" %} / عرض سعر</h1>
<div class="mb-4"> <div class="mb-4 print-mb-2">
<div class="fw-bold text-dark text-uppercase small">{% trans "Quotation Number" %} / رقم العرض</div> <div class="fw-bold text-dark text-uppercase small">{% trans "Quotation Number" %} / رقم العرض</div>
<div class="h5">{{ quotation.quotation_number|default:quotation.id }}</div> <div class="h5 print-h5">{{ quotation.quotation_number|default:quotation.id }}</div>
</div> </div>
<div class="row g-3"> <div class="row g-3">
<div class="col-6"> <div class="col-6">
@ -84,10 +84,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Quote For" %} / عرض مقدم إلى</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Quote For" %} / عرض مقدم إلى</div>
<div class="h5 fw-bold mb-1">{{ quotation.customer.name|default:_("Guest Customer") }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ quotation.customer.name|default:_("Guest Customer") }}</div>
{% if quotation.customer.phone %} {% if quotation.customer.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ quotation.customer.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ quotation.customer.phone }}</div>
{% endif %} {% endif %}
@ -96,39 +96,39 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-sm-6 text-sm-end"> <div class="col-sm-6 text-sm-end">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Status" %} / الحالة</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Status" %} / الحالة</div>
<div> <div>
{% if quotation.status == 'converted' %} {% if quotation.status == 'converted' %}
<span class="h5 badge bg-primary text-white rounded-pill px-4">{% trans "Converted" %} / محول</span> <span class="h5 badge bg-primary text-white rounded-pill px-4 print-badge">{% trans "Converted" %} / محول</span>
{% elif quotation.status == 'accepted' %} {% elif quotation.status == 'accepted' %}
<span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Accepted" %} / مقبول</span> <span class="h5 badge bg-success text-white rounded-pill px-4 print-badge">{% trans "Accepted" %} / مقبول</span>
{% elif quotation.status == 'rejected' %} {% elif quotation.status == 'rejected' %}
<span class="h5 badge bg-danger text-white rounded-pill px-4">{% trans "Rejected" %} / مرفوض</span> <span class="h5 badge bg-danger text-white rounded-pill px-4 print-badge">{% trans "Rejected" %} / مرفوض</span>
{% else %} {% else %}
<span class="h5 badge bg-info text-white rounded-pill px-4">{% trans "Open" %} / مفتوح</span> <span class="h5 badge bg-info text-white rounded-pill px-4 print-badge">{% trans "Open" %} / مفتوح</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Unit Price" %}</div> <div class="small text-muted">{% trans "Unit Price" %}</div>
<div class="small">سعر الوحدة</div> <div class="small">سعر الوحدة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -137,72 +137,72 @@
<tbody> <tbody>
{% for item in quotation.items.all %} {% for item in quotation.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-primary">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-primary print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Subtotal" %}</div> <div>{% trans "Subtotal" %}</div>
<div class="small fw-normal">المجموع الفرعي</div> <div class="small fw-normal">المجموع الفرعي</div>
</td> </td>
<td class="text-end pe-4 py-3 fw-bold border-top">{{ settings.currency_symbol }}{{ quotation.total_amount|add:quotation.discount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 fw-bold border-top print-py-1">{{ settings.currency_symbol }}{{ quotation.total_amount|add:quotation.discount|floatformat:3 }}</td>
</tr> </tr>
{% if quotation.discount > 0 %} {% if quotation.discount > 0 %}
<tr class="text-muted"> <tr class="text-muted">
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-2 fw-bold"> <td class="text-center py-2 fw-bold print-py-1">
<div>{% trans "Discount" %}</div> <div>{% trans "Discount" %}</div>
<div class="small fw-normal">الخصم</div> <div class="small fw-normal">الخصم</div>
</td> </td>
<td class="text-end pe-4 py-2 fw-bold">-{{ settings.currency_symbol }}{{ quotation.discount|floatformat:3 }}</td> <td class="text-end pe-4 py-2 fw-bold print-py-1">-{{ settings.currency_symbol }}{{ quotation.discount|floatformat:3 }}</td>
</tr> </tr>
{% endif %} {% endif %}
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Grand Total" %}</div> <div>{% trans "Grand Total" %}</div>
<div class="small fw-normal">المجموع الكلي</div> <div class="small fw-normal">المجموع الكلي</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top">{{ settings.currency_symbol }}{{ quotation.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-primary border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ quotation.total_amount|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<!-- Amount in Words --> <!-- Amount in Words -->
<div class="mb-5 px-5"> <div class="mb-5 px-5 print-mb-2 print-px-0">
<div class="p-3 bg-light rounded-3"> <div class="p-3 bg-light rounded-3 print-bg-none print-p-0">
<div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div> <div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
<div class="fw-bold text-dark">{{ amount_in_words }}</div> <div class="fw-bold text-dark">{{ amount_in_words }}</div>
</div> </div>
</div> </div>
<!-- Terms & Conditions --> <!-- Terms & Conditions -->
<div class="mb-5"> <div class="mb-5 print-mb-2">
<h6 class="fw-bold small text-uppercase mb-3 text-muted border-bottom pb-2">{% trans "Terms and Conditions" %} / الشروط والأحكام</h6> <h6 class="fw-bold small text-uppercase mb-3 text-muted border-bottom pb-2 print-mb-1">{% trans "Terms and Conditions" %} / الشروط والأحكام</h6>
<div class="small text-muted" style="white-space: pre-line;"> <div class="small text-muted print-small" style="white-space: pre-line;">
{{ quotation.terms_and_conditions|default:_("No specific terms provided.") }} {{ quotation.terms_and_conditions|default:_("No specific terms provided.") }}
</div> </div>
</div> </div>
<!-- Notes --> <!-- Notes -->
{% if quotation.notes %} {% if quotation.notes %}
<div class="bg-light p-4 rounded-3 mb-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Internal Notes" %} / ملاحظات داخلية</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Internal Notes" %} / ملاحظات داخلية</h6>
<p class="mb-0 small">{{ quotation.notes }}</p> <p class="mb-0 small">{{ quotation.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4"> <div class="text-center text-muted small mt-5 border-top pt-4 print-mt-2 print-pt-2">
<p class="mb-1">{% trans "This is a computer generated quotation." %} / هذا عرض سعر تم إنشاؤه بواسطة الكمبيوتر.</p> <p class="mb-1">{% trans "This is a computer generated quotation." %} / هذا عرض سعر تم إنشاؤه بواسطة الكمبيوتر.</p>
<p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p> <p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p>
</div> </div>
@ -230,32 +230,70 @@ function downloadPDF() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#quotation-card { #quotation-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@ -21,28 +21,28 @@
</div> </div>
<!-- Return Content --> <!-- Return Content -->
<div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;"> <div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
<div class="card-body p-0"> <div class="card-body p-0">
<!-- Header Section --> <!-- Header Section -->
<div class="p-5 bg-white"> <div class="p-5 bg-white print-section">
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
{% if settings.logo %} {% if settings.logo %}
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4"> <img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
{% else %} {% else %}
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3> <h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
{% endif %} {% endif %}
<div class="text-muted small"> <div class="text-muted small print-small">
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p> <p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p> <p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p> <p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
</div> </div>
</div> </div>
<div class="col-sm-6 text-sm-end" dir="rtl"> <div class="col-sm-6 text-sm-end" dir="rtl">
<h1 class="fw-bold text-uppercase text-danger opacity-50 mb-4" dir="ltr">{% trans "Sales Return" %} / مرتجع مبيعات</h1> <h1 class="fw-bold text-uppercase text-danger opacity-50 mb-4 print-mb-2 print-h1" dir="ltr">{% trans "Sales Return" %} / مرتجع مبيعات</h1>
<div class="mb-4 text-sm-end" dir="ltr"> <div class="mb-4 print-mb-2 text-sm-end" dir="ltr">
<div class="fw-bold text-dark text-uppercase small">{% trans "Return Number" %} / رقم المرتجع</div> <div class="fw-bold text-dark text-uppercase small">{% trans "Return Number" %} / رقم المرتجع</div>
<div class="h5">{{ sale_return.return_number|default:sale_return.id }}</div> <div class="h5 print-h5">{{ sale_return.return_number|default:sale_return.id }}</div>
</div> </div>
<div class="row g-3 text-sm-end" dir="ltr"> <div class="row g-3 text-sm-end" dir="ltr">
<div class="col-6"> <div class="col-6">
@ -57,10 +57,10 @@
</div> </div>
</div> </div>
<div class="row mb-5"> <div class="row mb-5 print-mb-2">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Customer Information" %} / معلومات العميل</div> <div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Customer Information" %} / معلومات العميل</div>
<div class="h5 fw-bold mb-1">{{ sale_return.customer.name|default:_("Guest Customer") }}</div> <div class="h5 fw-bold mb-1 print-h5">{{ sale_return.customer.name|default:_("Guest Customer") }}</div>
{% if sale_return.customer.phone %} {% if sale_return.customer.phone %}
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ sale_return.customer.phone }}</div> <div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ sale_return.customer.phone }}</div>
{% endif %} {% endif %}
@ -68,23 +68,23 @@
</div> </div>
<!-- Table Section --> <!-- Table Section -->
<div class="table-responsive mb-5"> <div class="table-responsive mb-5 print-mb-2">
<table class="table table-hover align-middle"> <table class="table table-hover align-middle table-sm-print">
<thead class="bg-light"> <thead class="bg-light print-bg-none">
<tr> <tr>
<th class="py-3 ps-4 border-0"> <th class="py-3 ps-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Item Description" %}</div> <div class="small text-muted">{% trans "Item Description" %}</div>
<div class="small">وصف العنصر</div> <div class="small">وصف العنصر</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Unit Price" %}</div> <div class="small text-muted">{% trans "Unit Price" %}</div>
<div class="small">سعر الوحدة</div> <div class="small">سعر الوحدة</div>
</th> </th>
<th class="py-3 text-center border-0"> <th class="py-3 text-center border-0 print-py-1">
<div class="small text-muted">{% trans "Quantity" %}</div> <div class="small text-muted">{% trans "Quantity" %}</div>
<div class="small">الكمية</div> <div class="small">الكمية</div>
</th> </th>
<th class="py-3 text-end pe-4 border-0"> <th class="py-3 text-end pe-4 border-0 print-py-1">
<div class="small text-muted">{% trans "Total" %}</div> <div class="small text-muted">{% trans "Total" %}</div>
<div class="small">المجموع</div> <div class="small">المجموع</div>
</th> </th>
@ -93,24 +93,24 @@
<tbody> <tbody>
{% for item in sale_return.items.all %} {% for item in sale_return.items.all %}
<tr> <tr>
<td class="py-3 ps-4"> <td class="py-3 ps-4 print-py-1">
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div> <div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
<div class="text-muted small">{{ item.product.name_en }}</div> <div class="text-muted small">{{ item.product.name_en }}</div>
</td> </td>
<td class="py-3 text-center">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td> <td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td>
<td class="py-3 text-center">{{ item.quantity|floatformat:2 }}</td> <td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
<td class="py-3 text-end pe-4 fw-bold text-danger">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td> <td class="py-3 text-end pe-4 fw-bold text-danger print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2" class="border-0"></td> <td colspan="2" class="border-0"></td>
<td class="text-center py-3 fw-bold border-top"> <td class="text-center py-3 fw-bold border-top print-py-1">
<div>{% trans "Total Refund" %}</div> <div>{% trans "Total Refund" %}</div>
<div class="small fw-normal">إجمالي المبلغ المرتجع</div> <div class="small fw-normal">إجمالي المبلغ المرتجع</div>
</td> </td>
<td class="text-end pe-4 py-3 h5 fw-bold text-danger border-top">{{ settings.currency_symbol }}{{ sale_return.total_amount|floatformat:3 }}</td> <td class="text-end pe-4 py-3 h5 fw-bold text-danger border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ sale_return.total_amount|floatformat:3 }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -118,13 +118,13 @@
<!-- Notes --> <!-- Notes -->
{% if sale_return.notes %} {% if sale_return.notes %}
<div class="bg-light p-4 rounded-3 mb-5"> <div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6> <h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
<p class="mb-0 small">{{ sale_return.notes }}</p> <p class="mb-0 small">{{ sale_return.notes }}</p>
</div> </div>
{% endif %} {% endif %}
<div class="text-center text-muted small mt-5 border-top pt-4"> <div class="text-center text-muted small mt-5 border-top pt-4 print-mt-2 print-pt-2">
<p class="mb-1">{% trans "Sales Return Confirmation" %} / تأكيد مرتجع مبيعات</p> <p class="mb-1">{% trans "Sales Return Confirmation" %} / تأكيد مرتجع مبيعات</p>
<p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p> <p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p>
</div> </div>
@ -152,32 +152,70 @@ function downloadPDF() {
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 0; margin: 10mm;
} }
body { body {
background-color: white !important; background-color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
font-size: 12px;
} }
.container { .container {
width: 210mm !important; width: 100% !important;
max-width: 210mm !important; max-width: 100% !important;
margin: 0 auto !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.d-print-none { display: none !important; }
/* Layout Overrides */
#invoice-card { #invoice-card {
width: 210mm !important; width: 100% !important;
min-height: 297mm !important; max-width: none !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 0 !important;
} }
.d-print-none { display: none !important; }
.p-5 { padding: 15mm !important; } .print-section {
.table-responsive { overflow: visible !important; } padding: 0 !important;
}
/* Spacing Reductions */
.print-mb-2 { margin-bottom: 0.5rem !important; }
.print-mb-1 { margin-bottom: 0.25rem !important; }
.print-mt-2 { margin-top: 1rem !important; }
.print-pt-2 { padding-top: 0.5rem !important; }
.print-pb-0 { padding-bottom: 0 !important; }
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.print-p-0 { padding: 0 !important; }
/* Font Size Reductions */
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
.print-h3 { font-size: 16px !important; }
.print-h5 { font-size: 14px !important; }
.print-small { font-size: 10px !important; }
/* Table Compactness */
.table th, .table td {
padding: 4px 8px !important;
font-size: 11px !important;
}
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Hide Backgrounds */
.print-bg-none { background-color: transparent !important; }
.badge {
border: 1px solid #000;
color: #000 !important;
background: transparent !important;
padding: 2px 8px !important;
}
/* Logo sizing */
.print-logo { max-height: 50px !important; }
} }
</style> </style>
{% endblock %} {% endblock %}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -12,9 +12,9 @@ class JobPositionAdmin(admin.ModelAdmin):
@admin.register(Employee) @admin.register(Employee)
class EmployeeAdmin(admin.ModelAdmin): class EmployeeAdmin(admin.ModelAdmin):
list_display = ('first_name', 'last_name', 'email', 'department', 'job_position', 'status') list_display = ('first_name', 'last_name', 'email', 'department', 'job_position', 'status', 'biometric_id')
list_filter = ('status', 'department', 'gender') list_filter = ('status', 'department', 'gender')
search_fields = ('first_name', 'last_name', 'email', 'phone') search_fields = ('first_name', 'last_name', 'email', 'phone', 'biometric_id')
@admin.register(Attendance) @admin.register(Attendance)
class AttendanceAdmin(admin.ModelAdmin): class AttendanceAdmin(admin.ModelAdmin):

27
hr/forms.py Normal file
View File

@ -0,0 +1,27 @@
from django import forms
from .models import Employee
class EmployeeForm(forms.ModelForm):
class Meta:
model = Employee
fields = [
'first_name', 'last_name', 'email', 'phone', 'gender', 'date_of_birth',
'address', 'department', 'job_position', 'hire_date', 'salary',
'status', 'biometric_id', 'user'
]
widgets = {
'first_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'First Name'}),
'last_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Last Name'}),
'email': forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'email@example.com'}),
'phone': forms.TextInput(attrs={'class': 'form-control', 'placeholder': '+1234567890'}),
'gender': forms.Select(attrs={'class': 'form-select'}),
'date_of_birth': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'address': forms.Textarea(attrs={'class': 'form-control', 'rows': 3, 'placeholder': 'Full Address'}),
'department': forms.Select(attrs={'class': 'form-select'}),
'job_position': forms.Select(attrs={'class': 'form-select'}),
'hire_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'salary': forms.NumberInput(attrs={'class': 'form-control', 'step': '0.01'}),
'status': forms.Select(attrs={'class': 'form-select'}),
'biometric_id': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Device User ID'}),
'user': forms.Select(attrs={'class': 'form-select'}),
}

View File

@ -26,6 +26,8 @@
<h6 class="m-0 font-weight-bold text-primary">{% trans "Job Details" %}</h6> <h6 class="m-0 font-weight-bold text-primary">{% trans "Job Details" %}</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
<p><strong>{% trans "Biometric Device ID" %}:</strong> {{ employee.biometric_id|default:"-" }}</p>
<hr>
<p><strong>{% trans "Department" %}:</strong> {{ employee.department.name_en }} / {{ employee.department.name_ar }}</p> <p><strong>{% trans "Department" %}:</strong> {{ employee.department.name_en }} / {{ employee.department.name_ar }}</p>
<p><strong>{% trans "Position" %}:</strong> {{ employee.job_position.title_en }} / {{ employee.job_position.title_ar }}</p> <p><strong>{% trans "Position" %}:</strong> {{ employee.job_position.title_en }} / {{ employee.job_position.title_ar }}</p>
<p><strong>{% trans "Hire Date" %}:</strong> {{ employee.hire_date }}</p> <p><strong>{% trans "Hire Date" %}:</strong> {{ employee.hire_date }}</p>

View File

@ -3,17 +3,170 @@
{% block content %} {% block content %}
<div class="container-fluid"> <div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800">{{ title }}</h1> <div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{ title }}</h1>
</div>
<div class="card shadow mb-4">
<div class="card-body">
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">{% trans "Save" %}</button> <!-- Section: Personal Information -->
<a href="{% url 'hr:employee_list' %}" class="btn btn-secondary">{% trans "Cancel" %}</a> <div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">{% trans "Personal Information" %}</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.first_name.id_for_label }}" class="form-label">{% trans "First Name" %}</label>
{{ form.first_name }}
{% if form.first_name.errors %}
<div class="text-danger small">{{ form.first_name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.last_name.id_for_label }}" class="form-label">{% trans "Last Name" %}</label>
{{ form.last_name }}
{% if form.last_name.errors %}
<div class="text-danger small">{{ form.last_name.errors }}</div>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.email.id_for_label }}" class="form-label">{% trans "Email Address" %}</label>
{{ form.email }}
{% if form.email.errors %}
<div class="text-danger small">{{ form.email.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.phone.id_for_label }}" class="form-label">{% trans "Phone Number" %}</label>
{{ form.phone }}
{% if form.phone.errors %}
<div class="text-danger small">{{ form.phone.errors }}</div>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.gender.id_for_label }}" class="form-label">{% trans "Gender" %}</label>
{{ form.gender }}
{% if form.gender.errors %}
<div class="text-danger small">{{ form.gender.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.date_of_birth.id_for_label }}" class="form-label">{% trans "Date of Birth" %}</label>
{{ form.date_of_birth }}
{% if form.date_of_birth.errors %}
<div class="text-danger small">{{ form.date_of_birth.errors }}</div>
{% endif %}
</div>
</div>
<div class="mb-3">
<label for="{{ form.address.id_for_label }}" class="form-label">{% trans "Address" %}</label>
{{ form.address }}
{% if form.address.errors %}
<div class="text-danger small">{{ form.address.errors }}</div>
{% endif %}
</div>
</div>
</div>
<!-- Section: Job Details -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">{% trans "Job Details" %}</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.department.id_for_label }}" class="form-label">{% trans "Department" %}</label>
{{ form.department }}
{% if form.department.errors %}
<div class="text-danger small">{{ form.department.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.job_position.id_for_label }}" class="form-label">{% trans "Job Position" %}</label>
{{ form.job_position }}
{% if form.job_position.errors %}
<div class="text-danger small">{{ form.job_position.errors }}</div>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.hire_date.id_for_label }}" class="form-label">{% trans "Hire Date" %}</label>
{{ form.hire_date }}
{% if form.hire_date.errors %}
<div class="text-danger small">{{ form.hire_date.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.salary.id_for_label }}" class="form-label">{% trans "Basic Salary" %}</label>
<div class="input-group">
<span class="input-group-text">$</span>
{{ form.salary }}
</div>
{% if form.salary.errors %}
<div class="text-danger small">{{ form.salary.errors }}</div>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.status.id_for_label }}" class="form-label">{% trans "Employment Status" %}</label>
{{ form.status }}
{% if form.status.errors %}
<div class="text-danger small">{{ form.status.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Section: System Access -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">{% trans "System & Access" %}</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.user.id_for_label }}" class="form-label">{% trans "Linked User Account" %}</label>
{{ form.user }}
<small class="form-text text-muted">{% trans "Select a user account for system login access." %}</small>
{% if form.user.errors %}
<div class="text-danger small">{{ form.user.errors }}</div>
{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.biometric_id.id_for_label }}" class="form-label">{% trans "Biometric Device ID" %}</label>
{{ form.biometric_id }}
<small class="form-text text-muted">{% trans "The ID used on the attendance device (e.g. ZKTeco)." %}</small>
{% if form.biometric_id.errors %}
<div class="text-danger small">{{ form.biometric_id.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="mb-4">
<button type="submit" class="btn btn-primary btn-lg">
<i class="fas fa-save fa-sm text-white-50"></i> {% trans "Save Employee" %}
</button>
<a href="{% url 'hr:employee_list' %}" class="btn btn-secondary btn-lg">
{% trans "Cancel" %}
</a>
</div>
</form> </form>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -16,6 +16,7 @@
<table class="table table-bordered" width="100%" cellspacing="0"> <table class="table table-bordered" width="100%" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>{% trans "Biometric ID" %}</th>
<th>{% trans "Name" %}</th> <th>{% trans "Name" %}</th>
<th>{% trans "Department" %}</th> <th>{% trans "Department" %}</th>
<th>{% trans "Position" %}</th> <th>{% trans "Position" %}</th>
@ -28,6 +29,7 @@
<tbody> <tbody>
{% for employee in employees %} {% for employee in employees %}
<tr> <tr>
<td>{{ employee.biometric_id|default:"-" }}</td>
<td> <td>
<a href="{% url 'hr:employee_detail' employee.pk %}"> <a href="{% url 'hr:employee_detail' employee.pk %}">
{{ employee.first_name }} {{ employee.last_name }} {{ employee.first_name }} {{ employee.last_name }}
@ -50,7 +52,7 @@
</tr> </tr>
{% empty %} {% empty %}
<tr> <tr>
<td colspan="7" class="text-center">{% trans "No employees found." %}</td> <td colspan="8" class="text-center">{% trans "No employees found." %}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>

View File

@ -3,6 +3,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin
from django.urls import reverse_lazy from django.urls import reverse_lazy
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
from .models import Employee, Department, Attendance, LeaveRequest, JobPosition, BiometricDevice from .models import Employee, Department, Attendance, LeaveRequest, JobPosition, BiometricDevice
from .forms import EmployeeForm
from django.db.models import Count from django.db.models import Count
from django.shortcuts import get_object_or_404, redirect from django.shortcuts import get_object_or_404, redirect
from django.contrib import messages from django.contrib import messages
@ -27,7 +28,7 @@ class EmployeeListView(LoginRequiredMixin, ListView):
class EmployeeCreateView(LoginRequiredMixin, CreateView): class EmployeeCreateView(LoginRequiredMixin, CreateView):
model = Employee model = Employee
fields = '__all__' form_class = EmployeeForm
template_name = 'hr/employee_form.html' template_name = 'hr/employee_form.html'
success_url = reverse_lazy('hr:employee_list') success_url = reverse_lazy('hr:employee_list')
@ -38,7 +39,7 @@ class EmployeeCreateView(LoginRequiredMixin, CreateView):
class EmployeeUpdateView(LoginRequiredMixin, UpdateView): class EmployeeUpdateView(LoginRequiredMixin, UpdateView):
model = Employee model = Employee
fields = '__all__' form_class = EmployeeForm
template_name = 'hr/employee_form.html' template_name = 'hr/employee_form.html'
success_url = reverse_lazy('hr:employee_list') success_url = reverse_lazy('hr:employee_list')

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB