Antoni Nuñez Romeu
db0935eb16
Build & Push Docker Images / test-backend (push) Failing after 36s
Build & Push Docker Images / test-frontend (push) Successful in 29s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped
Build & Push Docker Images / deploy (push) Successful in 7s
This commit introduces comprehensive observability for both backend and frontend, alongside a major UI/UX overhaul to align with modern design standards (Material 3 inspired) and improve localization. Backend changes: - Integrated OpenTelemetry SDK for distributed tracing. - Added Pino for structured JSON logging with OTel instrumentation for trace/span correlation. - Configured OTLP exporters to route traces and logs to Grafana Alloy. - Updated docker-compose to include necessary environment variables for observability. Frontend changes: - Integrated Grafana Faro for Real User Monitoring (RUM), capturing Web Vitals, JS errors, and user interactions. - Redesigned the entire UI using a new color palette and Material 3 design principles. - Refactored component architecture (App, Home, Search, Scanner, Profile, Alerts views) for better state management and navigation. - Improved mobile UX with a redesigned Bottom Navigation bar and Top Bar. - Localized the interface to Spanish (es). - Updated assets, icons, and PWA configuration (manifest, icons). - Refactored CSS to use a centralized design token system (CSS variables). Observability enables better debugging and performance monitoring across the entire stack.
100 lines
3.3 KiB
React
100 lines
3.3 KiB
React
import React from 'react';
|
|
import './AlertsView.css';
|
|
|
|
const alerts = [
|
|
{
|
|
id: 1,
|
|
type: 'reminder',
|
|
title: 'Recordatorio: Comprar Paracetamol',
|
|
detail: 'Quedan 2 cajas',
|
|
color: 'primary',
|
|
icon: 'bell',
|
|
actions: [{ label: 'Ver Detalles', variant: 'secondary' }],
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'availability',
|
|
title: 'Disponibilidad: Aspirina',
|
|
detail: 'Ya disponible en Farmacia Sol',
|
|
color: 'secondary',
|
|
icon: 'store',
|
|
actions: [{ label: 'Ir a Farmacia', variant: 'primary' }],
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'dose',
|
|
title: 'Próxima Toma',
|
|
detail: '12:00 PM',
|
|
color: 'tertiary',
|
|
icon: 'schedule',
|
|
actions: [{ label: 'Confirmar Toma', variant: 'tertiary' }],
|
|
},
|
|
];
|
|
|
|
const iconMap = {
|
|
bell: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
|
|
</svg>
|
|
),
|
|
store: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z" />
|
|
</svg>
|
|
),
|
|
schedule: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
function AlertsView({ onBack }) {
|
|
return (
|
|
<div className="alerts-view">
|
|
<main className="alerts-main">
|
|
<div className="alerts-header">
|
|
<h2 className="alerts-title">Mis Avisos</h2>
|
|
<p className="alerts-subtitle">Mantente al día con tus medicamentos.</p>
|
|
</div>
|
|
|
|
<div className="alerts-list">
|
|
{alerts.map((alert) => (
|
|
<div key={alert.id} className={`alert-card alert-card--${alert.color}`}>
|
|
<div className="alert-card-top">
|
|
<div className={`alert-icon alert-icon--${alert.color}`}>
|
|
{iconMap[alert.icon]}
|
|
</div>
|
|
<div className="alert-info">
|
|
<h3 className="alert-title">{alert.title}</h3>
|
|
<span className={`alert-badge alert-badge--${alert.color}`}>
|
|
{alert.detail}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="alert-actions">
|
|
{alert.actions.map((action, i) => (
|
|
<button
|
|
key={i}
|
|
className={`alert-btn alert-btn--${action.variant}`}
|
|
>
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
<button className="alert-delete" aria-label="Eliminar">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="3 6 5 6 21 6" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AlertsView;
|