251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Smart Dashboard" %} - {{ site_settings.business_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Header -->
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col">
|
|
<h1 class="h3 fw-bold mb-0">{% trans "Overview" %}</h1>
|
|
<p class="text-muted small mb-0">{% trans "Welcome back! Here's what's happening with your business today." %}</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="{% url 'pos' %}" class="btn btn-primary shadow-sm">
|
|
<i class="bi bi-plus-lg me-2"></i> {% trans "New Sale" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card glass-card border-0 p-3 stat-card">
|
|
<div class="d-flex align-items-center">
|
|
<div class="stat-icon bg-primary text-white bg-opacity-10 text-primary rounded-3 p-3 me-3">
|
|
<i class="bi bi-cash-stack fs-4 text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-muted small mb-1">{% trans "Total Revenue" %}</h6>
|
|
<h4 class="fw-bold mb-0">{{ site_settings.currency_symbol }}{{ total_sales_amount|floatformat:3 }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card glass-card border-0 p-3 stat-card">
|
|
<div class="d-flex align-items-center">
|
|
<div class="stat-icon bg-success bg-opacity-10 rounded-3 p-3 me-3">
|
|
<i class="bi bi-cart-check fs-4 text-success"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-muted small mb-1">{% trans "Total Sales" %}</h6>
|
|
<h4 class="fw-bold mb-0">{{ total_sales_count }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card glass-card border-0 p-3 stat-card">
|
|
<div class="d-flex align-items-center">
|
|
<div class="stat-icon bg-info bg-opacity-10 rounded-3 p-3 me-3">
|
|
<i class="bi bi-box-seam fs-4 text-info"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-muted small mb-1">{% trans "Total Products" %}</h6>
|
|
<h4 class="fw-bold mb-0">{{ total_products }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card glass-card border-0 p-3 stat-card">
|
|
<div class="d-flex align-items-center">
|
|
<div class="stat-icon bg-warning bg-opacity-10 rounded-3 p-3 me-3">
|
|
<i class="bi bi-people fs-4 text-warning"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-muted small mb-1">{% trans "Total Customers" %}</h6>
|
|
<h4 class="fw-bold mb-0">{{ total_customers }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<!-- Sales Chart -->
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm p-4 h-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="fw-bold mb-0">{% trans "Sales Revenue" %}</h5>
|
|
<span class="badge bg-primary bg-opacity-10 text-primary">{% trans "Last 7 Days" %}</span>
|
|
</div>
|
|
<div style="position: relative; height: 300px; width: 100%;">
|
|
<canvas id="salesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inventory Status -->
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm p-4 h-100">
|
|
<h5 class="fw-bold mb-4">{% trans "Low Stock Alerts" %}</h5>
|
|
{% if low_stock_products %}
|
|
<ul class="list-group list-group-flush">
|
|
{% for product in low_stock_products %}
|
|
<li class="list-group-item px-0 border-0 d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-light rounded p-2 me-3">
|
|
<i class="bi bi-box"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 fw-semibold">
|
|
{% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}
|
|
</p>
|
|
<small class="text-muted">
|
|
{% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-danger rounded-pill">{{ product.stock_quantity }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
{% if low_stock_count > 5 %}
|
|
<li class="list-group-item text-center border-0 pt-3">
|
|
<a href="{% url 'inventory' %}" class="small text-muted fw-bold">
|
|
+ {{ low_stock_count|add:"-5" }} {% trans "more items..." %}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-check-circle text-success display-4"></i>
|
|
<p class="mt-3 text-muted">{% trans "All stock levels are healthy!" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
<h5 class="fw-bold mb-4 mt-4">{% trans "Expired Items Alert" %}</h5>
|
|
{% if expired_count > 0 %}
|
|
<div class="alert alert-danger border-0 rounded-4 d-flex align-items-center mb-0">
|
|
<i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
|
|
<div>
|
|
<p class="mb-0 fw-bold">{{ expired_count }} {% trans "Items have expired!" %}</p>
|
|
<a href="{% url 'inventory' %}#expired-list" class="alert-link small">{% trans "View and manage expired stock" %}</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="bi bi-shield-check text-success display-6"></i>
|
|
<p class="mt-2 text-muted small">{% trans "No expired items in stock." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-auto pt-3 border-top">
|
|
<a href="{% url 'inventory' %}" class="btn btn-light btn-sm w-100 fw-bold">{% trans "View Full Inventory" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Transactions -->
|
|
<div class="row g-4">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm p-4">
|
|
<h5 class="fw-bold mb-4">{% trans "Recent Sales" %}</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>{% trans "Sale ID" %}</th>
|
|
<th>{% trans "Customer" %}</th>
|
|
<th>{% trans "Date" %}</th>
|
|
<th>{% trans "Total Amount" %}</th>
|
|
<th>{% trans "User" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for sale in recent_sales %}
|
|
<tr>
|
|
<td class="fw-bold">#{{ sale.id }}</td>
|
|
<td>{{ sale.customer.name|default:"Guest" }}</td>
|
|
<td>{{ sale.created_at|date:"M d, Y H:i" }}</td>
|
|
<td class="fw-bold">{{ site_settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td>
|
|
<td>
|
|
<span class="text-muted small">
|
|
<i class="bi bi-person me-1"></i>{{ sale.created_by.username|default:"System" }}
|
|
</span>
|
|
</td>
|
|
<td><span class="badge bg-success bg-opacity-10 text-success">{% trans "Completed" %}</span></td>
|
|
<td>
|
|
<a href="{% url 'invoice_detail' sale.id %}" class="btn btn-sm btn-light">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center py-4 text-muted">{% trans "No recent sales found." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const ctx = document.getElementById('salesChart').getContext('2d');
|
|
const salesChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {{ chart_labels|safe }},
|
|
datasets: [{
|
|
label: '{% trans "Revenue" %} ({{ site_settings.currency_symbol }})',
|
|
data: {{ chart_data|safe }},
|
|
borderColor: '#2E5BFF',
|
|
backgroundColor: 'rgba(46, 91, 255, 0.1)',
|
|
borderWidth: 3,
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#2E5BFF',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
drawBorder: false,
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |