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

fix: prevent Google Translate from breaking Material Icons and fix lang attribute

Browse Source
This commit is contained in:
Johan Samudio
2026-03-31 18:29:55 -05:00
parent a9b906099e
commit a60b079d94
43 changed files with 459 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/views/StrategicAnalytics.vue
View File

@ -3,7 +3,7 @@
<div class="header-section">
<div class="top-row">
<button class="download-btn" @click="generateReport">
<span class="material-icons">description</span>
<span class="material-icons notranslate" translate="no">description</span>
Descargar Informe
</button>
<div class="badge">INTELIGENCIA ESTRATÉGICA</div>
@ -19,7 +19,7 @@
:class="{ active: activeTab === 'overview' }"
@click="activeTab = 'overview'"
>
<span class="material-icons">dashboard</span>
<span class="material-icons notranslate" translate="no">dashboard</span>
Visión General
</button>
<button
@ -27,7 +27,7 @@
:class="{ active: activeTab === 'transport' }"
@click="activeTab = 'transport'"
>
<span class="material-icons">directions_bus</span>
<span class="material-icons notranslate" translate="no">directions_bus</span>
Logística de Transporte
</button>
<button
@ -35,13 +35,13 @@
:class="{ active: activeTab === 'commerce' }"
@click="activeTab = 'commerce'"
>
<span class="material-icons">storefront</span>
<span class="material-icons notranslate" translate="no">storefront</span>
Inteligencia Comercial
</button>
</div>
<div v-if="loading" class="loading-state">
<span class="material-icons spin">sync</span>
<span class="material-icons spin notranslate" translate="no">sync</span>
<p>Sincronizando con la red...</p>
</div>
@ -52,14 +52,14 @@
<div class="main-content">
<div class="kpi-grid">
<div class="kpi-card user-active">
<div class="kpi-icon"><span class="material-icons">person</span></div>
<div class="kpi-icon"><span class="material-icons notranslate" translate="no">person</span></div>
<div class="kpi-data">
<span class="kpi-value">{{ stats.users?.registered_active || 0 }}</span>
<span class="kpi-label">Usuarios Registrados Activos</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-icon"><span class="material-icons">analytics</span></div>
<div class="kpi-icon"><span class="material-icons notranslate" translate="no">analytics</span></div>
<div class="kpi-data">
<span class="kpi-value">{{ totalInteractionCount }}</span>
<span class="kpi-label">Interacciones Totales Hoy</span>
@ -69,7 +69,7 @@
<section class="analysis-section mini">
<div class="section-header">
<span class="material-icons">schedule</span>
<span class="material-icons notranslate" translate="no">schedule</span>
<h2>Mapa de Calor Horario</h2>
</div>
<div class="chart-container large">
@ -79,7 +79,7 @@
</div>
<aside class="side-info">
<div class="info-box">
<span class="material-icons">groups</span>
<span class="material-icons notranslate" translate="no">groups</span>
<h4>Control de Tráfico</h4>
<p>Esta sección muestra la salud general de la app. Si la línea de invitados supera por mucho a la de registrados, es momento de lanzar una campaña de fidelización.</p>
</div>
@ -94,7 +94,7 @@
<!-- RUTAS -->
<section class="analysis-section">
<div class="section-header">
<span class="material-icons">bar_chart</span>
<span class="material-icons notranslate" translate="no">bar_chart</span>
<h2>Rutas Turísticas más Consultadas</h2>
</div>
<div class="chart-container">
@ -105,7 +105,7 @@
<!-- CASETAS -->
<section class="analysis-section">
<div class="section-header">
<span class="material-icons">location_on</span>
<span class="material-icons notranslate" translate="no">location_on</span>
<h2>Puntos de Interés: Casetas (Paradas)</h2>
</div>
<div class="data-table-wrapper">
@ -135,7 +135,7 @@
<!-- RENDIMIENTO SHUTTLES -->
<section class="analysis-section">
<div class="section-header">
<span class="material-icons">trending_up</span>
<span class="material-icons notranslate" translate="no">trending_up</span>
<h2>Tasa de Reservación (Shuttles)</h2>
</div>
<div class="data-table-wrapper">
@ -154,8 +154,8 @@
<td>{{ data.views }}</td>
<td>
<div style="display:flex; gap: 12px; align-items:center;">
<span title="WhatsApp" style="display:flex; align-items:center; gap:2px;"><span class="material-icons" style="font-size:14px; color:#25D366;">chat</span> {{ data.whatsapp }}</span>
<span title="Llamadas" style="display:flex; align-items:center; gap:2px;"><span class="material-icons" style="font-size:14px; color:#cbd5e1;">phone</span> {{ data.calls }}</span>
<span title="WhatsApp" style="display:flex; align-items:center; gap:2px;"><span class="material-icons notranslate" style="font-size:14px; color:#25D366;" translate="no">chat</span> {{ data.whatsapp }}</span>
<span title="Llamadas" style="display:flex; align-items:center; gap:2px;"><span class="material-icons notranslate" style="font-size:14px; color:#cbd5e1;" translate="no">phone</span> {{ data.calls }}</span>
</div>
</td>
<td>
@ -172,7 +172,7 @@
</div>
<aside class="side-info">
<div class="info-box accent">
<span class="material-icons">local_shipping</span>
<span class="material-icons notranslate" translate="no">local_shipping</span>
<h4>Optimización de Logística</h4>
<p>Identifique paradas saturadas para coordinar con los conductores. Las rutas con conversión mayor al 15% son candidatas para ser rutas 'Express'.</p>
</div>
@ -186,14 +186,14 @@
<div class="main-content">
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-icon promo"><span class="material-icons">confirmation_number</span></div>
<div class="kpi-icon promo"><span class="material-icons notranslate" translate="no">confirmation_number</span></div>
<div class="kpi-data">
<span class="kpi-value">{{ stats.summary?.total_promo_clicks || 0 }}</span>
<span class="kpi-label">Cupones Activados</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-icon biz"><span class="material-icons">storefront</span></div>
<div class="kpi-icon biz"><span class="material-icons notranslate" translate="no">storefront</span></div>
<div class="kpi-data">
<span class="kpi-value">{{ stats.summary?.total_biz_views || 0 }}</span>
<span class="kpi-label">Visitas a Negocios</span>
@ -203,7 +203,7 @@
<section class="analysis-section">
<div class="section-header">
<span class="material-icons">ads_click</span>
<span class="material-icons notranslate" translate="no">ads_click</span>
<h2>Impacto de Aliados Comerciales</h2>
</div>
<div class="business-list">
@ -211,11 +211,11 @@
<!-- Business Header -->
<div class="business-header">
<div class="business-title-info">
<div class="biz-icon-box"><span class="material-icons">storefront</span></div>
<div class="biz-icon-box"><span class="material-icons notranslate" translate="no">storefront</span></div>
<h3>{{ name }}</h3>
</div>
<div class="business-total-badge">
<span class="material-icons">data_exploration</span>
<span class="material-icons notranslate" translate="no">data_exploration</span>
<span><b>{{ data.views + data.social + data.calls + data.location + data.promos + data.favs }}</b> Interacciones</span>
</div>
</div>
@ -223,35 +223,35 @@
<!-- Details Grid -->
<div class="business-details-grid">
<div class="detail-item">
<span class="material-icons" style="color:#cbd5e1">visibility</span>
<span class="material-icons notranslate" style="color:#cbd5e1" translate="no">visibility</span>
<div class="detail-info">
<span class="detail-value">{{ data.views }}</span>
<span class="detail-label">Vistas del Local</span>
</div>
</div>
<div class="detail-item">
<span class="material-icons" style="color:#25D366">chat</span>
<span class="material-icons notranslate" style="color:#25D366" translate="no">chat</span>
<div class="detail-info">
<span class="detail-value">{{ data.social }}</span>
<span class="detail-label">Redes / WP</span>
</div>
</div>
<div class="detail-item">
<span class="material-icons" style="color:#f87171">phone</span>
<span class="material-icons notranslate" style="color:#f87171" translate="no">phone</span>
<div class="detail-info">
<span class="detail-value">{{ data.calls }}</span>
<span class="detail-label">Llamadas Directas</span>
</div>
</div>
<div class="detail-item">
<span class="material-icons" style="color:#60a5fa">place</span>
<span class="material-icons notranslate" style="color:#60a5fa" translate="no">place</span>
<div class="detail-info">
<span class="detail-value">{{ data.location }}</span>
<span class="detail-label">Usos del Mapa</span>
</div>
</div>
<div class="detail-item">
<span class="material-icons" style="color:#e91e63">favorite</span>
<span class="material-icons notranslate" style="color:#e91e63" translate="no">favorite</span>
<div class="detail-info">
<span class="detail-value">{{ data.favs }}</span>
<span class="detail-label">Veces Favorito</span>
@ -263,7 +263,7 @@
<div class="business-coupons-section" :class="{ 'has-coupons': Object.keys(data.coupons || {}).length > 0 }">
<div class="coupons-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span class="material-icons" style="color:#fee715">confirmation_number</span>
<span class="material-icons notranslate" style="color:#fee715" translate="no">confirmation_number</span>
<h4>Tráfico por Promociones</h4>
</div>
<div class="status-pill-wrap">
@ -276,18 +276,18 @@
<div v-if="Object.keys(data.coupons || {}).length > 0" class="coupon-list">
<div v-for="(couponData, couponName) in data.coupons" :key="couponName" class="coupon-item">
<div class="coupon-name-box">
<span class="material-icons" style="font-size:14px; color:var(--text-secondary)">local_offer</span>
<span class="material-icons notranslate" style="font-size:14px; color:var(--text-secondary)" translate="no">local_offer</span>
<span class="coupon-name">{{ couponName }}</span>
</div>
<div class="coupon-stats">
<span class="stat" title="Clicks a la promo"><span class="material-icons">visibility</span> {{ couponData.views }}</span>
<span class="stat" title="Clicks al mapa desde promo"><span class="material-icons">place</span> {{ couponData.location }}</span>
<span class="stat" title="Clicks a la promo"><span class="material-icons notranslate" translate="no">visibility</span> {{ couponData.views }}</span>
<span class="stat" title="Clicks al mapa desde promo"><span class="material-icons notranslate" translate="no">place</span> {{ couponData.location }}</span>
</div>
</div>
</div>
<div v-else class="no-coupons">
<span class="material-icons">info</span> No hay promociones generadas.
<span class="material-icons notranslate" translate="no">info</span> No hay promociones generadas.
</div>
</div>
@ -297,7 +297,7 @@
</div>
<aside class="side-info">
<div class="info-box">
<span class="material-icons">shopping_bag</span>
<span class="material-icons notranslate" translate="no">shopping_bag</span>
<h4>Retorno Comercial</h4>
<p>Analice qué negocios están monetizando mejor el tráfico de SIB. Use estos datos para ofrecer espacios publicitarios premium a los negocios con salud 'Baja'.</p>
</div>