fureunoir/schon
fureunoir/schon
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Features: 1) Streamline component inclusion in admin dashboard; 2) Simplify KPIs and sales data layout; 3) Revise product list card structure for better readability and maintainability;

Browse source 
Fixes: 1) Remove redundant breaks and unnecessary div wrappings; 2) Simplify filters component by eliminating unnecessary card wrapper;

Extra: Refactor and clean up admin dashboard templates for decluttered structure and improved code consistency;
This commit is contained in:
Egor Pavlovich Gorbunov 2025-12-10 20:25:54 +03:00
parent d891000b19
commit 76cea49c06
3 changed files with 79 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
engine/core/templates/admin/dashboard/_filters.html
View file

@ -1,22 +1,14 @@
{% load i18n unfold %} {% load i18n unfold %}
{% component "unfold/components/card.html" with class="mb-4" %} <div class="flex flex-wrap items-center gap-2">
<div class="flex flex-wrap items-center gap-2"> {% with cur=tf|default:30 %}
{% component "unfold/components/text.html" with class="text-sm text-gray-500 dark:text-gray-400 mr-2" %} <a href="?tf=7"
{% trans "Timeframe" %} class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 7 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">7d</a>
{% endcomponent %} <a href="?tf=30"
{% with cur=tf|default:30 %} class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 30 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">30d</a>
<a href="?tf=7" <a href="?tf=90"
class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 7 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">7d</a> class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 90 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">90d</a>
<a href="?tf=30" <a href="?tf=360"
class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 30 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">30d</a> class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 360 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">360d</a>
<a href="?tf=90" {% endwith %}
class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 90 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">90d</a> </div>
<a href="?tf=360"
class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 360 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">360d</a>
{% endwith %}
{# <div class="ml-auto text-xs text-gray-400">#}
{# TODO: Integrate GA/Yandex.Metrica & Ads metrics#}
{# </div>#}
</div>
{% endcomponent %}

130
engine/core/templates/admin/dashboard/_product_lists.html
View file

@ -1,71 +1,69 @@
{% load i18n unfold %} {% load i18n unfold %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> {% component "unfold/components/card.html" %}
{% component "unfold/components/card.html" %} {% component "unfold/components/title.html" %}
{% component "unfold/components/title.html" %} {% trans "Most wished product" %}
{% trans "Most wished product" %}
{% endcomponent %}
{% if most_wished_products %}
<ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
{% for p in most_wished_products %}
<li class="py-2 first:pt-0 last:pb-0">
<a href="{{ p.admin_url }}" class="flex items-center gap-4">
{% if p.image %}
<img src="{{ p.image }}" alt="{{ p.name }}"
class="w-12 h-12 object-cover rounded"/>
{% endif %}
<span class="font-medium flex-1 truncate">{{ p.name }}</span>
<span class="text-xs px-2 py-0.5 rounded bg-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
</a>
</li>
{% endfor %}
</ul>
{% elif most_wished_product %}
<a href="{{ most_wished_product.admin_url }}" class="flex items-center gap-4">
{% if most_wished_product.image %}
<img src="{{ most_wished_product.image }}" alt="{{ most_wished_product.name }}"
class="w-16 h-16 object-cover rounded"/>
{% endif %}
<span class="font-medium">{{ most_wished_product.name }}</span>
</a>
{% else %}
{% component "unfold/components/text.html" %}
{% trans "No data yet." %}
{% endcomponent %}
{% endif %}
{% endcomponent %} {% endcomponent %}
{% if most_wished_products %}
<ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
{% for p in most_wished_products %}
<li class="py-2 first:pt-0 last:pb-0">
<a href="{{ p.admin_url }}" class="flex items-center gap-4">
{% if p.image %}
<img src="{{ p.image }}" alt="{{ p.name }}"
class="w-12 h-12 object-cover rounded"/>
{% endif %}
<span class="font-medium flex-1 truncate">{{ p.name }}</span>
<span class="text-xs px-2 py-0.5 rounded bg-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
</a>
</li>
{% endfor %}
</ul>
{% elif most_wished_product %}
<a href="{{ most_wished_product.admin_url }}" class="flex items-center gap-4">
{% if most_wished_product.image %}
<img src="{{ most_wished_product.image }}" alt="{{ most_wished_product.name }}"
class="w-16 h-16 object-cover rounded"/>
{% endif %}
<span class="font-medium">{{ most_wished_product.name }}</span>
</a>
{% else %}
{% component "unfold/components/text.html" %}
{% trans "No data yet." %}
{% endcomponent %}
{% endif %}
{% endcomponent %}
{% component "unfold/components/card.html" %} {% component "unfold/components/card.html" %}
{% component "unfold/components/title.html" %} {% component "unfold/components/title.html" %}
{% trans "Most popular product" %} {% trans "Most popular product" %}
{% endcomponent %}
{% if most_popular_products %}
<ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
{% for p in most_popular_products %}
<li class="py-2 first:pt-0 last:pb-0">
<a href="{{ p.admin_url }}" class="flex items-center gap-4">
{% if p.image %}
<img src="{{ p.image }}" alt="{{ p.name }}"
class="w-12 h-12 object-cover rounded"/>
{% endif %}
<span class="font-medium flex-1 truncate">{{ p.name }}</span>
<span class="text-xs px-2 py-0.5 rounded bg-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
</a>
</li>
{% endfor %}
</ul>
{% elif most_popular_product %}
<a href="{{ most_popular_product.admin_url }}" class="flex items-center gap-4">
{% if most_popular_product.image %}
<img src="{{ most_popular_product.image }}" alt="{{ most_popular_product.name }}"
class="w-16 h-16 object-cover rounded"/>
{% endif %}
<span class="font-medium">{{ most_popular_product.name }}</span>
</a>
{% else %}
{% component "unfold/components/text.html" %}
{% trans "No data yet." %}
{% endcomponent %}
{% endif %}
{% endcomponent %} {% endcomponent %}
</div> {% if most_popular_products %}
<ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
{% for p in most_popular_products %}
<li class="py-2 first:pt-0 last:pb-0">
<a href="{{ p.admin_url }}" class="flex items-center gap-4">
{% if p.image %}
<img src="{{ p.image }}" alt="{{ p.name }}"
class="w-12 h-12 object-cover rounded"/>
{% endif %}
<span class="font-medium flex-1 truncate">{{ p.name }}</span>
<span class="text-xs px-2 py-0.5 rounded bg-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
</a>
</li>
{% endfor %}
</ul>
{% elif most_popular_product %}
<a href="{{ most_popular_product.admin_url }}" class="flex items-center gap-4">
{% if most_popular_product.image %}
<img src="{{ most_popular_product.image }}" alt="{{ most_popular_product.name }}"
class="w-16 h-16 object-cover rounded"/>
{% endif %}
<span class="font-medium">{{ most_popular_product.name }}</span>
</a>
{% else %}
{% component "unfold/components/text.html" %}
{% trans "No data yet." %}
{% endcomponent %}
{% endif %}
{% endcomponent %}

14
engine/core/templates/admin/index.html
View file

@ -18,17 +18,13 @@
<div class="flex flex-col min-h-screen"> <div class="flex flex-col min-h-screen">
{% component "unfold/components/title.html" %} {% component "unfold/components/title.html" %}
{% trans "Dashboard" %} {% trans "Dashboard" %}
<br/> {% include "admin/dashboard/_filters.html" %}
{% endcomponent %} {% endcomponent %}
{% include "admin/dashboard/_filters.html" %}
{% include "admin/dashboard/_kpis.html" %} {% include "admin/dashboard/_kpis.html" %}
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 items-start"> <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 items-start">
<div class="xl:col-span-2"> {% include "admin/dashboard/_daily_sales.html" %}
{% include "admin/dashboard/_daily_sales.html" %}
</div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
@ -43,11 +39,7 @@
{% endif %} {% endif %}
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> {% include "admin/dashboard/_top_categories.html" %}
{% include "admin/dashboard/_top_categories.html" %}
{% include "admin/dashboard/_quick_links.html" %}
</div>
{% include "admin/dashboard/_product_lists.html" %} {% include "admin/dashboard/_product_lists.html" %}
{% component "unfold/components/separator.html" %} {% component "unfold/components/separator.html" %}