Features: 1) Refactored sales vs returns chart rendering for improved structure and readability;

Fixes: 1) Fixed inconsistent whitespace in image tag attributes;

Extra: 1) Added missing line break for visual spacing; 2) Updated footer text for consistency and clarity.
This commit is contained in:
Egor Pavlovich Gorbunov 2025-11-16 16:25:11 +03:00
parent d139b7daf6
commit d4ea32c375

View file

@ -60,43 +60,45 @@
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 items-start">
{% with gross=revenue_gross_30|default:0 returns=returns_30|default:0 %}
{% with total=gross|add:returns %}
{% component "unfold/components/card.html" with class="xl:col-span-2" %}
{% component "unfold/components/title.html" %}
{% trans "Sales vs Returns (30d)" %}
{% endcomponent %}
{% if total and total > 0 %}
{% widthratio gross total 360 as gross_deg %}
<div class="flex flex-col sm:flex-row items-center gap-6">
<div class="relative w-40 h-40">
<div class="w-40 h-40 rounded-full"
style="background:
conic-gradient(
rgb(34,197,94) 0 {{ gross_deg }}deg,
rgb(239,68,68) {{ gross_deg }}deg 360deg
);">
{% with total=gross|add:returns %}
{% component "unfold/components/card.html" with class="xl:col-span-2" %}
{% component "unfold/components/title.html" %}
{% trans "Sales vs Returns (30d)" %}
{% endcomponent %}
{% if total and total > 0 %}
{% widthratio gross total 360 as gross_deg %}
<div class="flex flex-col sm:flex-row items-center gap-6">
<div class="relative w-40 h-40">
<div class="w-40 h-40 rounded-full"
style="background:
conic-gradient(
rgb(34,197,94) 0 {{ gross_deg }}deg,
rgb(239,68,68) {{ gross_deg }}deg 360deg
);">
</div>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="inline-block w-3 h-3 rounded-sm"
style="background:rgb(34,197,94)"></span>
<span class="text-sm text-gray-600 dark:text-gray-300">{% trans "Gross" %}:</span>
<span class="font-semibold">{{ gross }}</span>
</div>
<div class="flex items-center gap-2">
<span class="inline-block w-3 h-3 rounded-sm"
style="background:rgb(239,68,68)"></span>
<span class="text-sm text-gray-600 dark:text-gray-300">{% trans "Returns" %}:</span>
<span class="font-semibold">{{ returns }}</span>
</div>
</div>
</div>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="inline-block w-3 h-3 rounded-sm" style="background:rgb(34,197,94)"></span>
<span class="text-sm text-gray-600 dark:text-gray-300">{% trans "Gross" %}:</span>
<span class="font-semibold">{{ gross }}</span>
</div>
<div class="flex items-center gap-2">
<span class="inline-block w-3 h-3 rounded-sm" style="background:rgb(239,68,68)"></span>
<span class="text-sm text-gray-600 dark:text-gray-300">{% trans "Returns" %}:</span>
<span class="font-semibold">{{ returns }}</span>
</div>
</div>
</div>
{% else %}
{% component "unfold/components/text.html" %}
{% trans "Not enough data for chart yet." %}
{% else %}
{% component "unfold/components/text.html" %}
{% trans "Not enough data for chart yet." %}
{% endcomponent %}
{% endif %}
{% endcomponent %}
{% endif %}
{% endcomponent %}
{% endwith %}
{% endwith %}
{% endwith %}
{% component "unfold/components/card.html" %}
@ -121,7 +123,8 @@
{% endcomponent %}
{% if most_wished_product %}
<a href="{{ most_wished_product.admin_url }}" class="flex items-center gap-4">
<img src="{{ most_wished_product.image }}" alt="{{ most_wished_product.name }}" class="w-16 h-16 object-cover rounded" />
<img src="{{ most_wished_product.image }}" alt="{{ most_wished_product.name }}"
class="w-16 h-16 object-cover rounded"/>
<span class="font-medium">{{ most_wished_product.name }}</span>
</a>
{% else %}
@ -137,7 +140,8 @@
{% endcomponent %}
{% if most_popular_product %}
<a href="{{ most_popular_product.admin_url }}" class="flex items-center gap-4">
<img src="{{ most_popular_product.image }}" alt="{{ most_popular_product.name }}" class="w-16 h-16 object-cover rounded" />
<img src="{{ most_popular_product.image }}" alt="{{ most_popular_product.name }}"
class="w-16 h-16 object-cover rounded"/>
<span class="font-medium">{{ most_popular_product.name }}</span>
</a>
{% else %}
@ -148,13 +152,14 @@
{% endcomponent %}
</div>
{% component "unfold/components/separator.html" %}
{% endcomponent %}
<div class="mt-4">
<br/>
{% component "unfold/components/text.html" with class="text-center text-xs text-gray-500 dark:text-gray-400" %}
"eVibes" {{ evibes_version }} · "Wiseless Team"
eVibes {{ evibes_version }} · Wiseless Team
{% endcomponent %}
</div>