38086-vm/core/templates/base.html
2026-02-03 03:00:53 +00:00

341 lines
21 KiB
HTML

{% load static i18n %}{% get_current_language as LANGUAGE_CODE %}<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ site_settings.business_name }}{% endblock %}</title>
{% if project_description %}
<meta name="description" content="{{ project_description }}">
<meta property="og:description" content="{{ project_description }}">
{% endif %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" rel="stylesheet">
{% if LANGUAGE_CODE == 'ar' %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
{% else %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
{% endif %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
{% block head %}{% endblock %}
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
{% if user.is_authenticated %}
<nav id="sidebar">
<div class="sidebar-header d-flex align-items-center">
<a class="navbar-brand fw-bold text-primary fs-4" href="{% url 'index' %}">
{% if site_settings.logo %}
<img src="{{ site_settings.logo.url }}" alt="Logo" height="30" class="me-2">
{% else %}
<i class="bi bi-calculator-fill me-2"></i>
{% endif %}
{{ site_settings.business_name|truncatechars:12 }}
</a>
</div>
<ul class="list-unstyled components">
<li>
<a href="{% url 'index' %}" class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
<i class="bi bi-speedometer2"></i> {% trans "Dashboard" %}
</a>
</li>
{% with url_name=request.resolver_match.url_name path=request.path %}
<!-- Sales Group -->
<li class="sidebar-group-header mt-2">
<a href="#salesSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'pos' or url_name == 'invoice_create' or url_name == 'invoices' or url_name == 'invoice_detail' or url_name == 'quotations' or url_name == 'quotation_create' or url_name == 'quotation_detail' or 'sales/returns' in path %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Sales" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'pos' or url_name == 'invoice_create' or url_name == 'invoices' or url_name == 'invoice_detail' or url_name == 'quotations' or url_name == 'quotation_create' or url_name == 'quotation_detail' or 'sales/returns' in path %}show{% endif %}" id="salesSubmenu">
<li>
<a href="{% url 'pos' %}" class="{% if url_name == 'pos' %}active{% endif %}">
<i class="bi bi-shop"></i> {% trans "POS System" %}
</a>
</li>
<li>
<a href="{% url 'invoice_create' %}" class="{% if url_name == 'invoice_create' %}active{% endif %}">
<i class="bi bi-plus-circle"></i> {% trans "New Sales" %}
</a>
</li>
<li>
<a href="{% url 'invoices' %}" class="{% if url_name == 'invoices' or url_name == 'invoice_detail' %}active{% endif %}">
<i class="bi bi-file-earmark-text"></i> {% trans "Sales Invoices" %}
</a>
</li>
<li>
<a href="{% url 'quotations' %}" class="{% if url_name == 'quotations' or url_name == 'quotation_create' or url_name == 'quotation_detail' %}active{% endif %}">
<i class="bi bi-file-earmark-spreadsheet"></i> {% trans "Quotation" %}
</a>
</li>
<li>
<a href="{% url 'sales_returns' %}" class="{% if 'sales/returns' in path %}active{% endif %}">
<i class="bi bi-arrow-return-left"></i> {% trans "Sales Return" %}
</a>
</li>
</ul>
</li>
<!-- Purchases Group -->
<li class="sidebar-group-header mt-2">
<a href="#purchasesSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'purchases' or url_name == 'purchase_create' or url_name == 'purchase_detail' or url_name == 'supplier_payments' or 'purchases/returns' in path %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Purchases" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'purchases' or url_name == 'purchase_create' or url_name == 'purchase_detail' or url_name == 'supplier_payments' or 'purchases/returns' in path %}show{% endif %}" id="purchasesSubmenu">
<li>
<a href="{% url 'purchase_create' %}" class="{% if url_name == 'purchase_create' %}active{% endif %}">
<i class="bi bi-plus-circle"></i> {% trans "New Purchase" %}
</a>
</li>
<li>
<a href="{% url 'purchases' %}" class="{% if url_name == 'purchases' or url_name == 'purchase_detail' %}active{% endif %}">
<i class="bi bi-cart-check"></i> {% trans "Purchase List" %}
</a>
</li>
<li>
<a href="{% url 'supplier_payments' %}" class="{% if url_name == 'supplier_payments' %}active{% endif %}">
<i class="bi bi-cash-stack"></i> {% trans "Supplier Payments" %}
</a>
</li>
<li>
<a href="{% url 'purchase_returns' %}" class="{% if 'purchases/returns' in path %}active{% endif %}">
<i class="bi bi-arrow-return-right"></i> {% trans "Purchase Return" %}
</a>
</li>
</ul>
</li>
<!-- Inventory Group -->
<li class="sidebar-group-header mt-2">
<a href="#inventorySubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'inventory' or url_name == 'barcode_labels' or url_name == 'reports' %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Inventory" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'inventory' or url_name == 'barcode_labels' or url_name == 'reports' %}show{% endif %}" id="inventorySubmenu">
<li>
<a href="{% url 'inventory' %}" class="{% if url_name == 'inventory' %}active{% endif %}">
<i class="bi bi-box-seam"></i> {% trans "Products" %}
</a>
</li>
<li>
<a href="{% url 'barcode_labels' %}" class="{% if url_name == 'barcode_labels' %}active{% endif %}">
<i class="bi bi-upc-scan"></i> {% trans "Barcode Printing" %}
</a>
</li>
</ul>
</li>
<!-- Expenses Group -->
<li class="sidebar-group-header mt-2">
<a href="#expensesSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'expenses' or url_name == 'expense_categories' %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Expenses" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'expenses' or url_name == 'expense_categories' %}show{% endif %}" id="expensesSubmenu">
<li>
<a href="{% url 'expenses' %}" class="{% if url_name == 'expenses' %}active{% endif %}">
<i class="bi bi-receipt"></i> {% trans "Expense List" %}
</a>
</li>
<li>
<a href="{% url 'expense_categories' %}" class="{% if url_name == 'expense_categories' %}active{% endif %}">
<i class="bi bi-tags"></i> {% trans "Categories" %}
</a>
</li>
</ul>
</li>
<!-- Contacts Group -->
<li class="sidebar-group-header mt-2">
<a href="#contactsSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'customers' or url_name == 'suppliers' %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Contacts" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'customers' or url_name == 'suppliers' %}show{% endif %}" id="contactsSubmenu">
<li>
<a href="{% url 'customers' %}" class="{% if url_name == 'customers' %}active{% endif %}">
<i class="bi bi-people"></i> {% trans "Customers" %}
</a>
</li>
<li>
<a href="{% url 'suppliers' %}" class="{% if url_name == 'suppliers' %}active{% endif %}">
<i class="bi bi-truck"></i> {% trans "Suppliers" %}
</a>
</li>
</ul>
</li>
{% if user.is_superuser or user.is_staff %}
<!-- Reports Group -->
<li class="sidebar-group-header mt-2">
<a href="#reportsSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'reports' or url_name == 'customer_statement' or url_name == 'supplier_statement' %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "Reports" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'reports' or url_name == 'customer_statement' or url_name == 'supplier_statement' %}show{% endif %}" id="reportsSubmenu">
<li>
<a href="{% url 'reports' %}" class="{% if url_name == 'reports' %}active{% endif %}">
<i class="bi bi-graph-up-arrow"></i> {% trans "Overview Reports" %}
</a>
</li>
<li>
<a href="{% url 'customer_statement' %}" class="{% if url_name == 'customer_statement' %}active{% endif %}">
<i class="bi bi-person-lines-fill"></i> {% trans "Customer Statement" %}
</a>
</li>
<li>
<a href="{% url 'supplier_statement' %}" class="{% if url_name == 'supplier_statement' %}active{% endif %}">
<i class="bi bi-truck-flatbed"></i> {% trans "Supplier Statement" %}
</a>
</li>
</ul>
</li>
<!-- System Group -->
<li class="sidebar-group-header mt-2">
<a href="#systemSubmenu" data-bs-toggle="collapse" aria-expanded="{% if url_name == 'settings' or url_name == 'user_management' or '/admin/' in path %}true{% else %}false{% endif %}" class="dropdown-toggle-custom">
<span>{% trans "System" %}</span>
<i class="bi bi-chevron-down chevron"></i>
</a>
<ul class="collapse list-unstyled sub-menu {% if url_name == 'settings' or url_name == 'user_management' or '/admin/' in path %}show{% endif %}" id="systemSubmenu">
<li>
<a href="{% url 'settings' %}" class="{% if url_name == 'settings' %}active{% endif %}">
<i class="bi bi-gear"></i> {% trans "Settings" %}
</a>
</li>
<li>
<a href="{% url 'user_management' %}" class="{% if url_name == 'user_management' %}active{% endif %}">
<i class="bi bi-person-lock"></i> {% trans "User Management" %}
</a>
</li>
<li>
<a href="/admin/">
<i class="bi bi-shield-lock"></i> {% trans "Django Admin" %}
</a>
</li>
</ul>
</li>
{% endif %}
{% endwith %}
</ul>
<div class="mt-auto p-4 border-top">
<form action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path }}">
<select name="language" onchange="this.form.submit()" class="form-select form-select-sm border-0 bg-light">
{% 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>
</form>
</div>
</nav>
{% endif %}
<!-- Page Content -->
<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 %}
<button type="button" id="sidebarCollapse" class="btn btn-light me-3">
<i class="bi bi-list"></i>
</button>
{% endif %}
<div class="ms-auto d-flex align-items-center">
<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 %}
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
{% if user.is_authenticated %}
const sidebar = document.getElementById('sidebar');
const sidebarCollapse = document.getElementById('sidebarCollapse');
sidebarCollapse.addEventListener('click', function (e) {
e.stopPropagation();
sidebar.classList.toggle('active');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', function (e) {
if (window.innerWidth <= 992 && sidebar.classList.contains('active')) {
if (!sidebar.contains(e.target) && e.target !== sidebarCollapse) {
sidebar.classList.remove('active');
}
}
});
{% endif %}
</script>
{% block scripts %}{% endblock %}
</body>
</html>