public/wallabicher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement dark mode support across the application

Browse Source
This commit is contained in:
Omar Sánchez Pizarro
2026-01-19 22:47:03 +01:00
parent d954d92daf
commit 75fa59807c
8 changed files with 160 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/frontend/src/views/Dashboard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 sm:mb-6">Dashboard</h1>
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6">Dashboard</h1>
<!-- Estadísticas -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
@@ -10,8 +10,8 @@
<Cog6ToothIcon class="w-6 h-6 text-primary-600" />
</div>
<div class="ml-3 sm:ml-4">
<p class="text-xs sm:text-sm font-medium text-gray-600">Workers Activos</p>
<p class="text-xl sm:text-2xl font-bold text-gray-900">{{ stats.activeWorkers }}/{{ stats.totalWorkers }}</p>
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Workers Activos</p>
<p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.activeWorkers }}/{{ stats.totalWorkers }}</p>
</div>
</div>
</div>
@@ -22,8 +22,8 @@
<HeartIcon class="w-6 h-6 text-green-600" />
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Favoritos</p>
<p class="text-2xl font-bold text-gray-900">{{ stats.totalFavorites }}</p>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Favoritos</p>
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.totalFavorites }}</p>
</div>
</div>
</div>
@@ -34,8 +34,8 @@
<DocumentTextIcon class="w-6 h-6 text-blue-600" />
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Artículos Notificados</p>
<p class="text-2xl font-bold text-gray-900">{{ stats.totalNotified }}</p>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Artículos Notificados</p>
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.totalNotified }}</p>
</div>
</div>
</div>
@@ -46,8 +46,8 @@
<ChartBarIcon class="w-6 h-6 text-purple-600" />
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Plataformas</p>
<p class="text-sm font-bold text-gray-900">
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Plataformas</p>
<p class="text-sm font-bold text-gray-900 dark:text-gray-100">
W: {{ stats.platforms?.wallapop || 0 }} | V: {{ stats.platforms?.vinted || 0 }}
</p>
</div>
@@ -58,14 +58,14 @@
<!-- Gráfico de plataformas -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
<div class="card">
<h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">Distribución por Plataforma</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Distribución por Plataforma</h2>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Wallapop</span>
<span class="text-sm font-medium text-gray-900">{{ stats.platforms?.wallapop || 0 }}</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Wallapop</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ stats.platforms?.wallapop || 0 }}</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
class="bg-primary-600 h-2 rounded-full"
:style="{
@@ -76,10 +76,10 @@
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Vinted</span>
<span class="text-sm font-medium text-gray-900">{{ stats.platforms?.vinted || 0 }}</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Vinted</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ stats.platforms?.vinted || 0 }}</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
class="bg-green-600 h-2 rounded-full"
:style="{
@@ -92,28 +92,28 @@
</div>
<div class="card">
<h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">Accesos Rápidos</h2>
<h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Accesos Rápidos</h2>
<div class="space-y-3">
<router-link
to="/articles"
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
>
<span class="text-sm font-medium text-gray-700">Ver todos los artículos</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400" />
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Ver todos los artículos</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</router-link>
<router-link
to="/favorites"
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
>
<span class="text-sm font-medium text-gray-700">Ver favoritos</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400" />
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Ver favoritos</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</router-link>
<router-link
to="/workers"
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
>
<span class="text-sm font-medium text-gray-700">Gestionar workers</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400" />
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Gestionar workers</span>
<ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</router-link>
</div>
</div>