Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove duplicate headers, fix i18n keys, unify theme colors in Discover and Schedules views

Browse Source 
- DiscoverView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables (--bg-primary, --active-color, etc.)
- SchedulesView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables
- es.json: add missing keys discover.searchPlaceholder, schedules.placeholder, schedules.upcoming, schedules.noSchedules, schedules.types
- en.json: same missing keys added for English
This commit is contained in:
Johan Samudio
2026-02-22 17:41:50 -05:00
parent c20733afc3
commit a1ba74cd49
4 changed files with 760 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

446
frontend/src/views/DiscoverView.vue
View File

@ -89,94 +89,92 @@ function getCategoryIcon(category: string) {
</script>
<template>
<div class="discover-view bg-white dark:bg-zinc-950 text-slate-900 dark:text-gray-200 min-h-screen pb-32">
<!-- Header Area -->
<header class="bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md px-6 pt-12 pb-4 sticky top-0 z-50 border-b border-slate-100 dark:border-zinc-800">
<div class="flex justify-between items-center mb-2">
<button @click="router.back()" class="material-icons text-3xl font-bold cursor-pointer dark:text-white">arrow_back</button>
<h1 class="text-2xl font-extrabold tracking-tighter dark:text-white uppercase italic">SIBU</h1>
<div class="w-8"></div>
</div>
</header>
<div class="discover-view">
<main class="px-5 pt-6">
<!-- Search Bar -->
<div class="mb-6">
<div class="relative flex items-center bg-slate-50 dark:bg-zinc-900 rounded-2xl shadow-sm p-1 border border-slate-100 dark:border-zinc-800">
<div class="p-3">
<span class="material-icons text-slate-400 dark:text-gray-500">search</span>
</div>
<input
v-model="searchQuery"
class="w-full bg-transparent border-none focus:ring-0 text-slate-900 dark:text-gray-200 font-medium placeholder:text-slate-400 dark:placeholder:text-gray-500 text-[15px]"
:placeholder="t('discover.searchPlaceholder') || 'Explora los mejores lugares en Chiriquí'"
type="text"
/>
<!-- Barra de búsqueda -->
<div class="search-section">
<div class="search-bar">
<span class="material-icons search-icon-inner">search</span>
<input
v-model="searchQuery"
class="search-input"
:placeholder="t('discover.searchPlaceholder')"
type="text"
/>
<button v-if="searchQuery" class="clear-search-btn" @click="searchQuery = ''">
<span class="material-icons">close</span>
</button>
</div>
</div>
<!-- Filtros de Región y Categoría -->
<div class="filters-row">
<div class="filter-card">
<div class="filter-label-row">
<span class="material-icons filter-icon">location_on</span>
<span class="filter-label-text">REGIÓN</span>
</div>
<select v-model="selectedArea" class="filter-select">
<option value="Todas">{{ t('discover.allAreas') }}</option>
<option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
</select>
</div>
<!-- Region & Category Selectors -->
<div class="flex gap-3 mb-8">
<div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
<div class="flex items-center gap-2">
<span class="material-icons text-blue-500 text-[18px] font-bold">location_on</span>
<span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Región</span>
</div>
<select v-model="selectedArea" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
<option value="Todas">{{ t('discover.allAreas') }}</option>
<option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
</select>
</div>
<div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
<div class="flex items-center gap-2">
<span class="material-icons text-blue-500 text-[18px] font-bold">category</span>
<span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Categoría</span>
</div>
<select v-model="selectedCategory" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
<option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
</select>
<div class="filter-card">
<div class="filter-label-row">
<span class="material-icons filter-icon">category</span>
<span class="filter-label-text">CATEGORÍA</span>
</div>
<select v-model="selectedCategory" class="filter-select">
<option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
</select>
</div>
</div>
<main class="discover-main">
<!-- Loading -->
<div v-if="isLoading" class="state-container">
<div class="spinner"></div>
<p class="state-text">Sincronizando con SIBU...</p>
</div>
<!-- Loading State -->
<div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
<div class="w-10 h-10 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin mb-4"></div>
<p class="text-slate-500 dark:text-gray-400 font-bold tracking-widest uppercase text-xs">Sincronizando con SIBU...</p>
</div>
<!-- Empty State -->
<div v-else-if="filteredBusinesses.length === 0" class="text-center py-20">
<div class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] p-10 border border-dashed border-slate-200 dark:border-zinc-800">
<span class="material-icons text-slate-300 dark:text-gray-600 text-5xl mb-4">search_off</span>
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">Sin resultados</h3>
<p class="text-slate-500 dark:text-gray-400 mb-6">La búsqueda no devolvió datos en esta frecuencia.</p>
<button @click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''" class="bg-blue-500 text-white px-8 py-3 rounded-xl font-black uppercase text-xs tracking-widest active:scale-95 transition-all">
REINICIAR SENSORES
<!-- Vacío -->
<div v-else-if="filteredBusinesses.length === 0" class="state-container">
<div class="empty-box">
<span class="material-icons empty-icon">search_off</span>
<h3 class="empty-title">Sin resultados</h3>
<p class="empty-desc">La búsqueda no devolvió resultados.</p>
<button
@click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''"
class="reset-btn"
>
REINICIAR FILTROS
</button>
</div>
</div>
<!-- Business Grid -->
<!-- Grid de negocios -->
<TransitionGroup
v-else
name="fade"
tag="div"
class="grid grid-cols-2 gap-4"
class="business-grid"
>
<div v-for="biz in filteredBusinesses"
:key="biz.id"
class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] overflow-hidden shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col active:scale-95 transition-all cursor-pointer"
@click="handleExplore(biz)"
<div
v-for="biz in filteredBusinesses"
:key="biz.id"
class="business-card"
@click="handleExplore(biz)"
>
<div class="relative h-44">
<img :src="getImageUrl(biz.image_url)" alt="" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-b from-black/40 to-transparent"></div>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md p-1.5 rounded-xl border border-white/10">
<span class="material-icons text-blue-400 text-[18px] flex items-center justify-center">
<div class="card-image-wrapper">
<img :src="getImageUrl(biz.image_url)" :alt="biz.name" class="card-img" />
<div class="card-gradient"></div>
<div class="card-category-badge">
<span class="material-icons category-badge-icon">
{{ getCategoryIcon(biz.category || '') }}
</span>
</div>
<div class="absolute top-3 right-3">
<div class="card-favorite-btn">
<FavoriteButton
item-type="business"
:item-id="biz.id"
@ -185,13 +183,11 @@ function getCategoryIcon(category: string) {
/>
</div>
</div>
<div class="p-4 flex flex-col flex-grow">
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-tight mb-2">{{ biz.name }}</h3>
<div class="mt-auto flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="material-icons text-blue-400 text-[14px]">near_me</span>
<span class="text-xs font-semibold text-slate-500 dark:text-gray-500">{{ biz.area }}</span>
</div>
<div class="card-body">
<h3 class="card-name">{{ biz.name }}</h3>
<div class="card-meta">
<span class="material-icons card-meta-icon">near_me</span>
<span class="card-area">{{ biz.area }}</span>
</div>
</div>
</div>
@ -202,19 +198,313 @@ function getCategoryIcon(category: string) {
<style scoped>
.discover-view {
font-family: 'Plus Jakarta Sans', sans-serif;
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--bg-primary);
color: var(--text-primary);
padding-bottom: 6rem;
}
/* ─── Búsqueda ─── */
.search-section {
padding: 1rem 1.25rem 0.5rem;
}
.search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.search-bar:focus-within {
border-color: var(--active-color);
}
.search-icon-inner {
color: var(--text-secondary);
font-size: 1.25rem;
flex-shrink: 0;
}
.search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 0.9375rem;
font-weight: 500;
font-family: inherit;
}
.search-input::placeholder {
color: var(--text-secondary);
}
.clear-search-btn {
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
display: flex;
align-items: center;
padding: 0;
}
/* ─── Filtros ─── */
.filters-row {
display: flex;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
}
.filter-card {
flex: 1;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
cursor: pointer;
}
.filter-label-row {
display: flex;
align-items: center;
gap: 0.375rem;
}
.filter-icon {
font-size: 1rem;
color: var(--active-color);
}
.filter-label-text {
font-size: 0.625rem;
font-weight: 800;
color: var(--text-secondary);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.filter-select {
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
padding: 0;
width: 100%;
}
.filter-select option {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ─── Estados ─── */
.discover-main {
flex: 1;
padding: 0 1.25rem;
}
.state-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 1rem;
gap: 1rem;
}
.spinner {
width: 2.5rem;
height: 2.5rem;
border: 3px solid var(--border-color);
border-top-color: var(--active-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-text {
color: var(--text-secondary);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.empty-box {
background: var(--bg-secondary);
border: 1.5px dashed var(--border-color);
border-radius: 1.5rem;
padding: 2.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.empty-icon {
font-size: 3rem;
color: var(--text-secondary);
opacity: 0.4;
margin-bottom: 0.5rem;
}
.empty-title {
font-size: 1.125rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
}
.empty-desc {
color: var(--text-secondary);
font-size: 0.875rem;
margin: 0;
}
.reset-btn {
margin-top: 0.75rem;
background: var(--active-color);
color: #101820;
border: none;
border-radius: 0.75rem;
padding: 0.625rem 1.5rem;
font-weight: 900;
font-size: 0.75rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: transform 0.15s;
}
.reset-btn:active { transform: scale(0.97); }
/* ─── Grid ─── */
.business-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
padding-bottom: 1rem;
}
.business-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 1.25rem;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
transition: transform 0.15s, box-shadow 0.15s;
}
.business-card:active {
transform: scale(0.97);
}
.card-image-wrapper {
position: relative;
height: 10rem;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 50%);
}
.card-category-badge {
position: absolute;
top: 0.625rem;
left: 0.625rem;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 0.625rem;
padding: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.category-badge-icon {
font-size: 1rem;
color: var(--active-color);
}
.card-favorite-btn {
position: absolute;
top: 0.625rem;
right: 0.625rem;
}
.card-body {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
flex: 1;
}
.card-name {
font-size: 0.9rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.card-meta {
display: flex;
align-items: center;
gap: 0.25rem;
margin-top: auto;
}
.card-meta-icon {
font-size: 0.875rem;
color: var(--active-color);
}
.card-area {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
/* ─── Transiciones ─── */
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(20px);
transform: translateY(16px);
}
.fade-leave-active {