139 lines
7.2 KiB
HTML
139 lines
7.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Smart Reports" %} | {{ site_settings.business_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1 class="h3 fw-bold">{% trans "Analytics & Reports" %}</h1>
|
|
<p class="text-muted">{% trans "Deep dive into your business performance." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reports Navigation Cards -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-3">
|
|
<a href="{% url 'expense_report' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
|
|
<div class="card-body text-center p-4">
|
|
<div class="icon-box bg-danger-soft text-danger rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="bi bi-wallet2 fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">{% trans "Expense Report" %}</h6>
|
|
<small class="text-muted">{% trans "Track spending by category & date" %}</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="{% url 'cashflow_report' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
|
|
<div class="card-body text-center p-4">
|
|
<div class="icon-box bg-success-soft text-success rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="bi bi-cash-stack fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">{% trans "Cashflow" %}</h6>
|
|
<small class="text-muted">{% trans "Inflow vs Outflow analysis" %}</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="{% url 'customer_statement' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
|
|
<div class="card-body text-center p-4">
|
|
<div class="icon-box bg-primary-soft text-primary rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="bi bi-people fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">{% trans "Customer Statement" %}</h6>
|
|
<small class="text-muted">{% trans "Account balances & history" %}</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="{% url 'supplier_statement' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
|
|
<div class="card-body text-center p-4">
|
|
<div class="icon-box bg-warning-soft text-warning rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="bi bi-truck fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">{% trans "Supplier Statement" %}</h6>
|
|
<small class="text-muted">{% trans "Payables & purchase history" %}</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="{% url 'vat_report' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
|
|
<div class="card-body text-center p-4">
|
|
<div class="icon-box bg-info-soft text-info rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="bi bi-percent fs-3"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">{% trans "VAT Report" %}</h6>
|
|
<small class="text-muted">{% trans "Tax declaration summary" %}</small>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<!-- Monthly Revenue Table -->
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm p-4 h-100">
|
|
<h5 class="fw-bold mb-4">{% trans "Monthly Revenue" %}</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Month" %}</th>
|
|
<th class="text-end">{% trans "Revenue" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for sale in monthly_sales %}
|
|
<tr>
|
|
<td>{{ sale.month|date:"F Y" }}</td>
|
|
<td class="text-end fw-bold">{{ site_settings.currency_symbol }}{{ sale.total|floatformat:3 }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="2" class="text-center text-muted">{% trans "No data available." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Products -->
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm p-4 h-100">
|
|
<h5 class="fw-bold mb-4">{% trans "Top Selling Products" %}</h5>
|
|
<ul class="list-group list-group-flush">
|
|
{% for item in top_products %}
|
|
<li class="list-group-item px-0 py-3 border-0 d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<p class="mb-0 fw-bold">
|
|
{% if LANGUAGE_CODE == 'ar' %}{{ item.product__name_ar }}{% else %}{{ item.product__name_en }}{% endif %}
|
|
</p>
|
|
<small class="text-muted">{{ item.total_qty }} {% trans "units sold" %}</small>
|
|
</div>
|
|
<div class="text-end">
|
|
<span class="d-block fw-bold text-primary">{{ site_settings.currency_symbol }}{{ item.revenue|floatformat:3 }}</span>
|
|
</div>
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item px-0 border-0 text-center text-muted">{% trans "No sales data." %}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); }
|
|
.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
|
|
.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
|
|
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
|
|
.bg-info-soft { background-color: rgba(13, 202, 240, 0.1); }
|
|
.lift-hover { transition: transform 0.2s, box-shadow 0.2s; }
|
|
.lift-hover:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
|
|
</style>
|
|
{% endblock %} |