parent
03cab14cf2
commit
38843a996a
@ -0,0 +1,163 @@ |
||||
{% extends "admin/base_site.html" %} |
||||
{% load admin_urls %} |
||||
|
||||
{% block title %}Shop Dashboard{% endblock %} |
||||
|
||||
{% block breadcrumbs %} |
||||
<div class="breadcrumbs"> |
||||
<a href="{% url 'admin:index' %}">Home</a> |
||||
› <a href="{% url 'admin:app_list' app_label='shop' %}">Shop</a> |
||||
› Dashboard |
||||
</div> |
||||
{% endblock %} |
||||
|
||||
{% block content %} |
||||
<div class="dashboard"> |
||||
<div class="dashboard-stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;"> |
||||
|
||||
<!-- Order Status Cards --> |
||||
<div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;"> |
||||
<h3 style="margin: 0 0 15px 0; color: #495057;">Orders by Status</h3> |
||||
<div class="status-list"> |
||||
{% for status_data in order_status_data %} |
||||
<div class="status-item" style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e9ecef;"> |
||||
<span style="font-weight: 500; color: #495057;">{{ status_data.label }}</span> |
||||
<div style="display: flex; align-items: center; gap: 10px;"> |
||||
<span class="count" style="background: #007bff; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"> |
||||
{{ status_data.count }} |
||||
</span> |
||||
<span class="total" style="color: #28a745; font-weight: 500;"> |
||||
€{{ status_data.total_amount|floatformat:2 }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Total Summary Card --> |
||||
<div class="stat-card" style="background: linear-gradient(135deg, #007bff, #0056b3); color: white; border-radius: 8px; padding: 20px;"> |
||||
<h3 style="margin: 0 0 15px 0;">Total Summary</h3> |
||||
<div class="summary-stats"> |
||||
<div style="margin-bottom: 10px;"> |
||||
<div style="font-size: 24px; font-weight: bold;">{{ total_orders }}</div> |
||||
<div style="opacity: 0.9;">Total Orders</div> |
||||
</div> |
||||
<div> |
||||
<div style="font-size: 24px; font-weight: bold;">€{{ total_revenue|floatformat:2 }}</div> |
||||
<div style="opacity: 0.9;">Total Revenue</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Recent Activity Card --> |
||||
<div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;"> |
||||
<h3 style="margin: 0 0 15px 0; color: #495057;">Recent Activity</h3> |
||||
<div class="recent-stats"> |
||||
<div style="margin-bottom: 10px;"> |
||||
<div style="font-size: 18px; font-weight: bold; color: #28a745;">{{ orders_today }}</div> |
||||
<div style="color: #6c757d; font-size: 14px;">Orders Today</div> |
||||
</div> |
||||
<div style="margin-bottom: 10px;"> |
||||
<div style="font-size: 18px; font-weight: bold; color: #ffc107;">{{ orders_this_week }}</div> |
||||
<div style="color: #6c757d; font-size: 14px;">Orders This Week</div> |
||||
</div> |
||||
<div> |
||||
<div style="font-size: 18px; font-weight: bold; color: #17a2b8;">{{ orders_this_month }}</div> |
||||
<div style="color: #6c757d; font-size: 14px;">Orders This Month</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Quick Actions Card --> |
||||
<div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;"> |
||||
<h3 style="margin: 0 0 15px 0; color: #495057;">Quick Actions</h3> |
||||
<div class="quick-actions"> |
||||
<a href="{% url 'admin:shop_order_changelist' %}" |
||||
style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; text-align: center;"> |
||||
View All Orders |
||||
</a> |
||||
<a href="{% url 'admin:shop_order_changelist' %}?show_preparation=1" |
||||
style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #28a745; color: white; text-decoration: none; border-radius: 4px; text-align: center;"> |
||||
Orders to Prepare ({{ orders_to_prepare }}) |
||||
</a> |
||||
<a href="{% url 'admin:shop_product_changelist' %}" |
||||
style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #6c757d; color: white; text-decoration: none; border-radius: 4px; text-align: center;"> |
||||
Manage Products |
||||
</a> |
||||
<a href="{% url 'admin:shop_coupon_changelist' %}" |
||||
style="display: block; padding: 8px 12px; background: #ffc107; color: #212529; text-decoration: none; border-radius: 4px; text-align: center;"> |
||||
Manage Coupons |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Detailed Status Breakdown --> |
||||
<div class="detailed-breakdown" style="background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-top: 20px;"> |
||||
<h3 style="margin: 0 0 20px 0; color: #495057;">Status Breakdown</h3> |
||||
<div style="overflow-x: auto;"> |
||||
<table style="width: 100%; border-collapse: collapse;"> |
||||
<thead> |
||||
<tr style="background: #f8f9fa;"> |
||||
<th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Status</th> |
||||
<th style="padding: 12px; text-align: center; border-bottom: 2px solid #dee2e6;">Count</th> |
||||
<th style="padding: 12px; text-align: center; border-bottom: 2px solid #dee2e6;">Percentage</th> |
||||
<th style="padding: 12px; text-align: right; border-bottom: 2px solid #dee2e6;">Total Value</th> |
||||
<th style="padding: 12px; text-align: right; border-bottom: 2px solid #dee2e6;">Avg Order Value</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{% for status_data in order_status_data %} |
||||
<tr style="border-bottom: 1px solid #dee2e6;"> |
||||
<td style="padding: 12px; font-weight: 500;">{{ status_data.label }}</td> |
||||
<td style="padding: 12px; text-align: center;"> |
||||
<span style="background: #007bff; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;"> |
||||
{{ status_data.count }} |
||||
</span> |
||||
</td> |
||||
<td style="padding: 12px; text-align: center;">{{ status_data.percentage|floatformat:1 }}%</td> |
||||
<td style="padding: 12px; text-align: right; color: #28a745; font-weight: 500;"> |
||||
€{{ status_data.total_amount|floatformat:2 }} |
||||
</td> |
||||
<td style="padding: 12px; text-align: right;"> |
||||
{% if status_data.count > 0 %} |
||||
€{{ status_data.avg_order_value|floatformat:2 }} |
||||
{% else %} |
||||
€0.00 |
||||
{% endif %} |
||||
</td> |
||||
</tr> |
||||
{% endfor %} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<style> |
||||
.dashboard { |
||||
max-width: 1200px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.stat-card { |
||||
transition: transform 0.2s ease, box-shadow 0.2s ease; |
||||
} |
||||
|
||||
.stat-card:hover { |
||||
transform: translateY(-2px); |
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.quick-actions a:hover { |
||||
opacity: 0.9; |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
.dashboard-stats { |
||||
grid-template-columns: 1fr !important; |
||||
} |
||||
} |
||||
</style> |
||||
{% endblock %} |
||||
Loading…
Reference in new issue