Restructure with Turborepo
This commit is contained in:
Antoni Nuñez Romeu
@@ -0,0 +1,143 @@
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
max-width: 48rem;
|
||||
z-index: 50;
|
||||
padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
|
||||
background: var(--surface-container-lowest);
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
height: 5.5rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Desktop navigation - full width */
|
||||
@media (min-width: 1025px) {
|
||||
.bottom-nav {
|
||||
max-width: 100%;
|
||||
padding: 0.25rem 2rem calc(0.5rem + env(safe-area-inset-bottom));
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.15rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--on-surface-variant);
|
||||
font: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: color 0.15s;
|
||||
position: relative;
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
|
||||
.bottom-nav-item.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.nav-icon-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: var(--radius-full);
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-fab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
/* Stronger, brighter blue to make scan button easy to find */
|
||||
background: #2b5bb5;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 26px rgba(43, 91, 181, 0.32);
|
||||
margin-top: -1.5rem;
|
||||
transition: transform 0.12s, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.nav-fab:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.nav-fab:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 36px rgba(43, 91, 181, 0.36);
|
||||
}
|
||||
|
||||
.nav-fab:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px rgba(43, 91, 181, 0.32);
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
background: var(--error);
|
||||
color: var(--on-error);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
border: 2px solid var(--surface-container-lowest);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.nav-label--active {
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-indicator {
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius-full);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.bottom-nav-item.active .nav-icon-wrap {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.bottom-nav-item.active .nav-icon-wrap svg {
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.bottom-nav-item:hover {
|
||||
color: var(--primary);
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-elevated.active .nav-label {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
|
||||
import './BottomNav.css';
|
||||
|
||||
function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
|
||||
const tabs = [
|
||||
{ id: 'home', label: 'Inicio', Icon: IconHome },
|
||||
{ id: 'search', label: 'Buscar', Icon: IconSearch },
|
||||
{ id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
|
||||
{ id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
|
||||
{ id: 'profile', label: 'Usuario', Icon: IconUser },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="bottom-nav" aria-label="Navegación principal">
|
||||
{tabs.map(({ id, label, Icon, elevated, badge, badgeCount: count, requiresAuth }) => {
|
||||
const disabled = requiresAuth && !isLoggedIn;
|
||||
const isActive = activeTab === id;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
className={[
|
||||
'bottom-nav-item',
|
||||
isActive ? 'active' : '',
|
||||
disabled ? 'disabled' : '',
|
||||
elevated ? 'nav-elevated' : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
onClick={() => {
|
||||
if (!disabled) onChange(id);
|
||||
}}
|
||||
disabled={disabled}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
aria-label={label}
|
||||
>
|
||||
{elevated ? (
|
||||
<div className="nav-fab">
|
||||
<Icon size={28} />
|
||||
</div>
|
||||
) : (
|
||||
<span className="nav-icon-wrap">
|
||||
<Icon size={26} />
|
||||
{badge && (
|
||||
<span className="nav-badge">{count}</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<span className={`nav-label${isActive && !elevated ? ' nav-label--active' : ''}`}>
|
||||
{label}
|
||||
</span>
|
||||
{isActive && !elevated && <span className="nav-indicator" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomNav;
|
||||
@@ -0,0 +1,173 @@
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(28, 25, 23, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(2px);
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem 2.25rem 1.75rem;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
box-shadow: 0 20px 60px rgba(28, 25, 23, 0.18);
|
||||
animation: slideUp 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(12px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--surface-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-tab {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.5rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.modal-tab.is-active {
|
||||
background: var(--surface);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
|
||||
}
|
||||
|
||||
.modal-tab:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-box h2 {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-sub {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-field label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-field input {
|
||||
padding: 0.6rem 0.85rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 4px);
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.modal-field input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.modal-field input:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.modal-error {
|
||||
font-size: 0.82rem;
|
||||
color: #b91c1c;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1.35rem;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 0.55rem 1.1rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.modal-cancel:hover:not(:disabled) {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.modal-submit {
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 0.55rem 1.35rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.modal-submit:hover:not(:disabled) {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.modal-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-cancel:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import './LoginModal.css';
|
||||
|
||||
function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
|
||||
const [mode, setMode] = useState(initialMode === 'register' ? 'register' : 'login');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const usernameRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
usernameRef.current?.focus();
|
||||
function handleKey(e) { if (e.key === 'Escape') onClose(); }
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => document.removeEventListener('keydown', handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
setError('');
|
||||
}, [mode]);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const u = username.trim();
|
||||
if (!u || !password) return;
|
||||
if (mode === 'register' && password.length < 8) {
|
||||
setError('La contraseña debe tener al menos 8 caracteres');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const endpoint = mode === 'register' ? '/api/auth/register' : '/api/auth/login';
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ username: u, password }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setError(data.error || (mode === 'register' ? 'No se pudo crear la cuenta' : 'Inicio de sesión fallido'));
|
||||
} else {
|
||||
onLogin(data.user);
|
||||
}
|
||||
} catch {
|
||||
setError('Error de red — inténtalo de nuevo');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const isRegister = mode === 'register';
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div
|
||||
className="modal-box"
|
||||
onClick={e => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div className="modal-tabs" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={!isRegister}
|
||||
className={`modal-tab${!isRegister ? ' is-active' : ''}`}
|
||||
onClick={() => setMode('login')}
|
||||
disabled={loading}
|
||||
>
|
||||
Iniciar sesión
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isRegister}
|
||||
className={`modal-tab${isRegister ? ' is-active' : ''}`}
|
||||
onClick={() => setMode('register')}
|
||||
disabled={loading}
|
||||
>
|
||||
Crear cuenta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 id="modal-title">{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}</h2>
|
||||
<p className="modal-sub">
|
||||
{isRegister
|
||||
? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
|
||||
: 'Inicia sesión para gestionar tu perfil y notificaciones.'}
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<div className="modal-field">
|
||||
<label htmlFor="modal-username">Usuario</label>
|
||||
<input
|
||||
id="modal-username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
ref={usernameRef}
|
||||
disabled={loading}
|
||||
minLength={isRegister ? 3 : undefined}
|
||||
maxLength={isRegister ? 32 : undefined}
|
||||
/>
|
||||
{isRegister && (
|
||||
<p className="modal-hint">3–32 caracteres: letras, dígitos o guión bajo.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-field">
|
||||
<label htmlFor="modal-password">Contraseña</label>
|
||||
<input
|
||||
id="modal-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
autoComplete={isRegister ? 'new-password' : 'current-password'}
|
||||
disabled={loading}
|
||||
minLength={isRegister ? 8 : undefined}
|
||||
/>
|
||||
{isRegister && (
|
||||
<p className="modal-hint">Al menos 8 caracteres.</p>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="modal-error">{error}</p>}
|
||||
<div className="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="modal-cancel"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="modal-submit"
|
||||
disabled={loading || !username.trim() || !password}
|
||||
>
|
||||
{loading
|
||||
? (isRegister ? 'Creando…' : 'Iniciando sesión…')
|
||||
: (isRegister ? 'Crear cuenta' : 'Iniciar sesión')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginModal;
|
||||
@@ -0,0 +1,143 @@
|
||||
.medicine-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.medicine-card {
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
border: 1px solid var(--outline-variant);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.medicine-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.medicine-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.medicine-card h3 {
|
||||
color: var(--on-surface);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notify-bell {
|
||||
background: var(--surface-container-low);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--radius-full);
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.notify-bell:hover:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.notify-bell:active:not(:disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.notify-bell:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.notify-bell--on {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.notify-bell--locked {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.notify-error {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.medicine-card-body {
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
|
||||
.medicine-card-body p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.medicine-card-body strong {
|
||||
color: var(--on-surface);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.medicine-card-footer {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.view-pharmacies {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.view-pharmacies::after {
|
||||
content: "→";
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.medicine-card:hover .view-pharmacies::after {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
background: var(--surface-container-low);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--on-surface-variant);
|
||||
border: 1px dashed var(--outline-variant);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './MedicineResults.css';
|
||||
import {
|
||||
pushSupported,
|
||||
isSubscribedLocally,
|
||||
subscribeToPush,
|
||||
unsubscribeFromPush,
|
||||
} from '../utils/notifications.js';
|
||||
|
||||
function MedicineResults({ medicines, onSelect, query, currentUser, onLoginRequest }) {
|
||||
if (medicines.length === 0 && query.length >= 2) {
|
||||
return (
|
||||
<div className="no-results">
|
||||
<p>No se encontraron medicamentos para "{query}"</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="medicine-results">
|
||||
{medicines.map((medicine) => (
|
||||
<MedicineCard
|
||||
key={medicine.nregistro || medicine.id}
|
||||
medicine={medicine}
|
||||
onSelect={onSelect}
|
||||
currentUser={currentUser}
|
||||
onLoginRequest={onLoginRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
|
||||
const nregistro = medicine.nregistro || medicine.id;
|
||||
const [subscribed, setSubscribed] = useState(() => isSubscribedLocally(nregistro));
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const supported = pushSupported();
|
||||
|
||||
useEffect(() => {
|
||||
setSubscribed(isSubscribedLocally(nregistro));
|
||||
}, [nregistro]);
|
||||
|
||||
async function handleBell(e) {
|
||||
e.stopPropagation();
|
||||
if (!currentUser) {
|
||||
onLoginRequest?.();
|
||||
return;
|
||||
}
|
||||
if (!supported) {
|
||||
setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).');
|
||||
return;
|
||||
}
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (subscribed) {
|
||||
await unsubscribeFromPush(nregistro);
|
||||
setSubscribed(false);
|
||||
} else {
|
||||
await subscribeToPush(nregistro, medicine.name);
|
||||
setSubscribed(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[notify] toggle failed:', err);
|
||||
setError(err.message || 'No se pudo actualizar la suscripción');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="medicine-card" onClick={() => onSelect(medicine)}>
|
||||
<div className="medicine-card-header">
|
||||
<h3>{medicine.name}</h3>
|
||||
<button
|
||||
type="button"
|
||||
className={`notify-bell${subscribed && currentUser ? ' notify-bell--on' : ''}${!currentUser ? ' notify-bell--locked' : ''}`}
|
||||
onClick={handleBell}
|
||||
disabled={busy}
|
||||
aria-pressed={subscribed && !!currentUser}
|
||||
aria-label={
|
||||
!currentUser
|
||||
? 'Inicia sesión para activar notificaciones'
|
||||
: subscribed
|
||||
? 'Desactivar notificaciones para este medicamento'
|
||||
: 'Notificarme cuando esté disponible'
|
||||
}
|
||||
title={
|
||||
!currentUser
|
||||
? 'Inicia sesión para activar notificaciones'
|
||||
: subscribed
|
||||
? 'Notificaciones activadas — clic para desactivar'
|
||||
: 'Notificarme cuando este medicamento esté en una farmacia'
|
||||
}
|
||||
>
|
||||
{subscribed && currentUser ? '🔔' : '🔕'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="medicine-card-body">
|
||||
<p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p>
|
||||
<p><strong>Dosis:</strong> {medicine.dosage} • <strong>Forma:</strong> {medicine.form}</p>
|
||||
{error && <p className="notify-error" onClick={e => e.stopPropagation()}>{error}</p>}
|
||||
</div>
|
||||
<div className="medicine-card-footer">
|
||||
<span className="view-pharmacies">Ver farmacias →</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MedicineResults;
|
||||
@@ -0,0 +1,166 @@
|
||||
.pharmacy-list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.pharmacy-list-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--on-surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pharmacy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pharmacy-card {
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--outline-variant);
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.pharmacy-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.pharmacy-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pharmacy-header h4 {
|
||||
color: var(--on-surface);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pharmacy-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pharmacy-distance {
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 69, 13, 0.08);
|
||||
color: var(--primary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.pharmacy-card:hover .pharmacy-header h4 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.pharmacy-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pharmacy-address,
|
||||
.pharmacy-phone {
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.pharmacy-hours {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.pharmacy-hours-dot {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.pharmacy-hours--open {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.pharmacy-hours--closed {
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.pharmacy-pricing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stock {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.35rem 0.8rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stock.in-stock {
|
||||
background: rgba(0, 69, 13, 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stock.low-stock {
|
||||
background: rgba(180, 83, 9, 0.12);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.stock.out-of-stock {
|
||||
background: rgba(186, 26, 26, 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.loading-pharmacies,
|
||||
.no-pharmacies {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
background: var(--surface-container-low);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--on-surface-variant);
|
||||
border: 1px solid var(--outline-variant);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pharmacy-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './PharmacyList.css';
|
||||
import { haversineKm, formatDistance } from '../utils/geo';
|
||||
import { getOpenStatus } from '../utils/hours';
|
||||
import {
|
||||
pushSupported,
|
||||
isSubscribedLocally,
|
||||
subscribeToPush,
|
||||
unsubscribeFromPush,
|
||||
} from '../utils/notifications.js';
|
||||
|
||||
function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser, onLoginRequest }) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="loading-pharmacies">
|
||||
<p>Cargando farmacias...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (pharmacies.length === 0) {
|
||||
return (
|
||||
<div className="no-pharmacies">
|
||||
<p>No se encontraron farmacias con este medicamento</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pharmacy-list">
|
||||
<h3 className="pharmacy-list-title">
|
||||
Disponible en {pharmacies.length} {pharmacies.length === 1 ? 'farmacia' : 'farmacias'}
|
||||
</h3>
|
||||
<div className="pharmacy-grid">
|
||||
{pharmacies.map((pharmacy) => {
|
||||
const distanceKm =
|
||||
userPosition && pharmacy.latitude != null && pharmacy.longitude != null
|
||||
? haversineKm(userPosition.lat, userPosition.lon, pharmacy.latitude, pharmacy.longitude)
|
||||
: null;
|
||||
return (
|
||||
<PharmacyCard
|
||||
key={pharmacy.id}
|
||||
pharmacy={pharmacy}
|
||||
distanceKm={distanceKm}
|
||||
medicine={medicine}
|
||||
currentUser={currentUser}
|
||||
onLoginRequest={onLoginRequest}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest }) {
|
||||
const nregistro = medicine?.nregistro || medicine?.id;
|
||||
const supported = pushSupported();
|
||||
const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0;
|
||||
const showBell = Boolean(medicine && nregistro && outOfStock);
|
||||
|
||||
const [subscribed, setSubscribed] = useState(() =>
|
||||
showBell ? isSubscribedLocally(nregistro, pharmacy.id) : false
|
||||
);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (showBell) setSubscribed(isSubscribedLocally(nregistro, pharmacy.id));
|
||||
}, [nregistro, pharmacy.id, showBell]);
|
||||
|
||||
async function handleBell(e) {
|
||||
e.stopPropagation();
|
||||
if (!currentUser) {
|
||||
onLoginRequest?.();
|
||||
return;
|
||||
}
|
||||
if (!supported) {
|
||||
setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).');
|
||||
return;
|
||||
}
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (subscribed) {
|
||||
await unsubscribeFromPush(nregistro, pharmacy.id);
|
||||
setSubscribed(false);
|
||||
} else {
|
||||
await subscribeToPush(nregistro, medicine.name, pharmacy.id);
|
||||
setSubscribed(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[notify] pharmacy toggle failed:', err);
|
||||
setError(err.message || 'No se pudo actualizar la suscripción');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const openStatus = getOpenStatus(pharmacy.opening_hours);
|
||||
|
||||
return (
|
||||
<div className="pharmacy-card">
|
||||
<div className="pharmacy-header">
|
||||
<h4>🏥 {pharmacy.name}</h4>
|
||||
<div className="pharmacy-header-actions">
|
||||
{distanceKm != null && (
|
||||
<span className="pharmacy-distance">{formatDistance(distanceKm)}</span>
|
||||
)}
|
||||
{showBell && (
|
||||
<button
|
||||
type="button"
|
||||
className={`notify-bell${subscribed && currentUser ? ' notify-bell--on' : ''}${!currentUser ? ' notify-bell--locked' : ''}`}
|
||||
onClick={handleBell}
|
||||
disabled={busy}
|
||||
aria-pressed={subscribed && !!currentUser}
|
||||
aria-label={
|
||||
!currentUser
|
||||
? 'Inicia sesión para activar notificaciones'
|
||||
: subscribed
|
||||
? 'Desactivar notificaciones para esta farmacia'
|
||||
: 'Notificarme cuando llegue a esta farmacia'
|
||||
}
|
||||
title={
|
||||
!currentUser
|
||||
? 'Inicia sesión para activar notificaciones'
|
||||
: subscribed
|
||||
? 'Notificaciones activadas para esta farmacia — clic para desactivar'
|
||||
: 'Notificarme cuando llegue a esta farmacia'
|
||||
}
|
||||
>
|
||||
{subscribed && currentUser ? '🔔' : '🔕'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pharmacy-details">
|
||||
{openStatus && (
|
||||
<p className={`pharmacy-hours pharmacy-hours--${openStatus.status}`}>
|
||||
<span className="pharmacy-hours-dot" /> {openStatus.label}
|
||||
</p>
|
||||
)}
|
||||
<p className="pharmacy-address">📍 {pharmacy.address}</p>
|
||||
{pharmacy.phone && (
|
||||
<p className="pharmacy-phone">📞 {pharmacy.phone}</p>
|
||||
)}
|
||||
{error && <p className="notify-error">{error}</p>}
|
||||
<div className="pharmacy-pricing">
|
||||
{pharmacy.price && (
|
||||
<span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>
|
||||
)}
|
||||
{pharmacy.stock !== undefined && (
|
||||
<span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
|
||||
{pharmacy.stock > 20 ? '✓ En Stock' : pharmacy.stock > 0 ? `⚠ Stock Bajo (${pharmacy.stock})` : '✗ Sin Stock'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PharmacyList;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import L from 'leaflet';
|
||||
|
||||
// Fix default marker icon broken by webpack/vite asset bundling
|
||||
delete L.Icon.Default.prototype._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
|
||||
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
||||
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||
});
|
||||
|
||||
function PharmacyMap({ pharmacies }) {
|
||||
const located = pharmacies.filter(p => p.latitude != null && p.longitude != null);
|
||||
|
||||
if (located.length === 0) return null;
|
||||
|
||||
const center = [
|
||||
located.reduce((s, p) => s + p.latitude, 0) / located.length,
|
||||
located.reduce((s, p) => s + p.longitude, 0) / located.length,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="pharmacy-map-wrapper" style={{ height: '350px', width: '100%', marginTop: '1rem', borderRadius: '8px', overflow: 'hidden' }}>
|
||||
<MapContainer center={center} zoom={13} style={{ height: '100%', width: '100%' }} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
{located.map(pharmacy => (
|
||||
<Marker key={pharmacy.id} position={[pharmacy.latitude, pharmacy.longitude]}>
|
||||
<Popup>
|
||||
<strong>{pharmacy.name}</strong><br />
|
||||
{pharmacy.address}
|
||||
{pharmacy.phone && <><br />{pharmacy.phone}</>}
|
||||
</Popup>
|
||||
</Marker>
|
||||
))}
|
||||
</MapContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PharmacyMap;
|
||||
@@ -0,0 +1,194 @@
|
||||
.saved-notifications-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(28, 25, 23, 0.55);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 5vh 1rem;
|
||||
z-index: 1000;
|
||||
animation: fadeInBackdrop 0.18s ease-out;
|
||||
}
|
||||
|
||||
.saved-notifications-modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px rgba(28, 25, 23, 0.25);
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: popIn 0.22s ease-out;
|
||||
}
|
||||
|
||||
.saved-notifications-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.saved-notifications-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.saved-notifications-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.saved-notifications-close:hover {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.saved-notifications-body {
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.saved-notifications-status,
|
||||
.saved-notifications-empty,
|
||||
.saved-notifications-error {
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.saved-notifications-error {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.saved-notifications-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.saved-notifications-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--surface-muted, #fafaf9);
|
||||
}
|
||||
|
||||
.saved-notifications-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.saved-notifications-item-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.35rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.saved-notifications-item-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.saved-notifications-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--secondary-container, #dbe7ff);
|
||||
color: var(--on-secondary, #06204a);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.saved-notifications-chip--pharmacy {
|
||||
background: var(--primary-container, #cfead0);
|
||||
color: var(--on-primary, #09310a);
|
||||
}
|
||||
|
||||
.saved-notifications-address {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.saved-notifications-remove {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 0.45rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.saved-notifications-remove:hover:not(:disabled) {
|
||||
border-color: #b91c1c;
|
||||
color: #b91c1c;
|
||||
background: rgba(185, 28, 28, 0.06);
|
||||
}
|
||||
|
||||
.saved-notifications-remove:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
@keyframes fadeInBackdrop {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.saved-notifications-backdrop {
|
||||
padding: 2vh 0.5rem;
|
||||
}
|
||||
|
||||
.saved-notifications-modal {
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.saved-notifications-header {
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.saved-notifications-body {
|
||||
padding: 0.85rem 1.1rem 1.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './SavedNotifications.css';
|
||||
|
||||
function SavedNotifications({ onClose }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [items, setItems] = useState([]);
|
||||
const [busyId, setBusyId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', { credentials: 'include' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (cancelled) return;
|
||||
const merged = [
|
||||
...(data.pharmacy || []),
|
||||
...(data.global || []),
|
||||
].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || ''));
|
||||
setItems(merged);
|
||||
} catch (err) {
|
||||
if (!cancelled) setError(err.message || 'No se pudieron cargar las notificaciones guardadas');
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
async function handleDelete(item) {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
setBusyId(key);
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ scope: item.scope, id: item.id }),
|
||||
});
|
||||
if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`);
|
||||
setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
|
||||
} catch (err) {
|
||||
setError(err.message || 'No se pudo eliminar la notificación');
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="saved-notifications-backdrop" onClick={onClose}>
|
||||
<div className="saved-notifications-modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="saved-notifications-header">
|
||||
<h2>🔔 Notificaciones Guardadas</h2>
|
||||
<button className="saved-notifications-close" onClick={onClose} aria-label="Cerrar">×</button>
|
||||
</div>
|
||||
<div className="saved-notifications-body">
|
||||
{loading && <p className="saved-notifications-status">Cargando…</p>}
|
||||
{!loading && error && <p className="saved-notifications-error">{error}</p>}
|
||||
{!loading && !error && items.length === 0 && (
|
||||
<p className="saved-notifications-empty">
|
||||
Aún no hay notificaciones guardadas. Toca la campana 🔕 en una farmacia sin stock para recibir notificaciones cuando se reponga.
|
||||
</p>
|
||||
)}
|
||||
{!loading && !error && items.length > 0 && (
|
||||
<ul className="saved-notifications-list">
|
||||
{items.map(item => {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
return (
|
||||
<li key={key} className="saved-notifications-item">
|
||||
<div className="saved-notifications-item-main">
|
||||
<div className="saved-notifications-item-name">
|
||||
{item.medicine_name || item.medicine_nregistro}
|
||||
</div>
|
||||
<div className="saved-notifications-item-meta">
|
||||
{item.scope === 'pharmacy' ? (
|
||||
<>
|
||||
<span className="saved-notifications-chip saved-notifications-chip--pharmacy">
|
||||
🏥 {item.pharmacy_name || `Farmacia #${item.pharmacy_id}`}
|
||||
</span>
|
||||
{item.pharmacy_address && (
|
||||
<span className="saved-notifications-address">{item.pharmacy_address}</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="saved-notifications-chip">
|
||||
Cualquier farmacia
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="saved-notifications-remove"
|
||||
onClick={() => handleDelete(item)}
|
||||
disabled={busyId === key}
|
||||
aria-label="Eliminar notificación"
|
||||
>
|
||||
{busyId === key ? '…' : 'Eliminar'}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SavedNotifications;
|
||||
@@ -0,0 +1,64 @@
|
||||
.search-bar-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.25rem 1rem;
|
||||
border: 2px solid var(--outline-variant);
|
||||
transition: border-color 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--primary);
|
||||
font-size: 1.5rem;
|
||||
margin-right: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 1rem 0;
|
||||
font-size: 1.125rem;
|
||||
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--on-surface-variant);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
background: var(--surface-container-low);
|
||||
border: 1px solid var(--outline-variant);
|
||||
color: var(--on-surface-variant);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.15s;
|
||||
margin-left: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.clear-button:hover {
|
||||
background: var(--surface-container);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import './SearchBar.css';
|
||||
|
||||
function SearchBar({ value, onChange, placeholder }) {
|
||||
return (
|
||||
<div className="search-bar-container">
|
||||
<div className="search-bar">
|
||||
<span className="search-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="search-input"
|
||||
autoFocus
|
||||
/>
|
||||
{value && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={() => onChange('')}
|
||||
aria-label="Limpiar búsqueda"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar;
|
||||
@@ -0,0 +1,602 @@
|
||||
.admin-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-form {
|
||||
background: var(--surface-muted);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.admin-form h3 {
|
||||
color: var(--primary);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-ring);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hours-editor {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
margin: 0.5rem 0 1rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.hours-editor legend {
|
||||
padding: 0 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hours-editor-hint {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 0.85rem;
|
||||
}
|
||||
|
||||
.hours-row {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 6.5rem 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.hours-row.is-closed input[type="time"] {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.hours-day {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hours-closed-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hours-sep {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hours-row input[type="time"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hours-row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"day closed"
|
||||
"open close";
|
||||
}
|
||||
.hours-day { grid-area: day; }
|
||||
.hours-closed-toggle { grid-area: closed; justify-self: end; }
|
||||
.hours-row input[type="time"]:first-of-type { grid-area: open; }
|
||||
.hours-row input[type="time"]:last-of-type { grid-area: close; }
|
||||
.hours-sep { display: none; }
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 14px var(--primary-shadow);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--surface-card);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(4, 120, 87, 0.1);
|
||||
color: var(--accent);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: rgba(4, 120, 87, 0.16);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.admin-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--surface-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.admin-item:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 2px 8px rgba(28, 25, 23, 0.06);
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-content h4 {
|
||||
color: var(--text-main);
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-content p {
|
||||
margin: 0.2rem 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 2.5rem;
|
||||
font-style: italic;
|
||||
background: var(--surface-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px dashed var(--border-strong);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--primary-faint);
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0.5rem 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.info-box p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.info-box p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.medicine-meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pharmacy-medicines-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pharmacy-medicines-section h3 {
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Medicine search styles */
|
||||
.loading-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.medicine-search-results {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-top: 0.5rem;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
padding: 1rem 1.25rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.search-result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background-color: var(--surface-muted);
|
||||
}
|
||||
|
||||
.search-result-item strong {
|
||||
color: var(--text-main);
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-result-item span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.selected-medicine-info {
|
||||
background: var(--primary-faint);
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.selected-medicine-info p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.selected-medicine-info .medicine-details {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background: var(--surface-card);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* Pharmacies: search, region import, list filter */
|
||||
.pharmacy-tools-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
|
||||
}
|
||||
|
||||
.pharmacy-tools-card h3 {
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.pharmacy-tools-hint {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 1.25rem 0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.city-lookup-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.city-lookup-input-wrap {
|
||||
flex: 1 1 220px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.city-lookup-submit {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.city-lookup-feedback {
|
||||
font-size: 0.88rem;
|
||||
margin: 0 0 1.1rem 0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.city-lookup-feedback.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.city-lookup-feedback.err {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.pharmacy-tools-hint a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.pharmacy-tools-hint a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.region-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.region-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.region-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.region-presets label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.region-presets select {
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.import-mode-row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.import-mode-select-wrap {
|
||||
max-width: 28rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.open-data-url-row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pharmacy-tools-hint code {
|
||||
font-size: 0.85em;
|
||||
background: var(--surface-muted);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tool-actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.tool-actions-row .btn-import-webhook {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-region-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-main);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filter-region-toggle input {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.import-feedback {
|
||||
margin-top: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.import-feedback.success {
|
||||
background: rgba(4, 120, 87, 0.1);
|
||||
border: 1px solid rgba(4, 120, 87, 0.25);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.import-feedback.error {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin: -0.5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-actions button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
padding: 2rem;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 3rem;
|
||||
box-shadow: var(--glass-shadow);
|
||||
border: 1px solid var(--border);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.85rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.login-header h2::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 3px;
|
||||
margin: 0.85rem auto 0;
|
||||
background: var(--primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.login-form .form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.login-form .form-group label {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.login-form .form-group input {
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.login-form .form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-ring);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.login-form .form-group input:disabled {
|
||||
background: var(--surface-muted);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid #fecaca;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.95rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
|
||||
margin-top: 0.5rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px var(--primary-shadow);
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
background: var(--border-strong);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.help-text code {
|
||||
background: var(--surface-muted);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85em;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: var(--accent-warm);
|
||||
background: rgba(180, 83, 9, 0.08);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid rgba(180, 83, 9, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-box {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import React, { useState } from 'react';
|
||||
import './LoginForm.css';
|
||||
|
||||
function LoginForm({ onLogin }) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include', // Important for sessions
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Inicio de sesión fallido');
|
||||
}
|
||||
|
||||
// Success - notify parent component
|
||||
onLogin(data.user);
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
setError(error.message || 'Usuario o contraseña inválidos');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-box">
|
||||
<div className="login-header">
|
||||
<h2>🔐 Acceso Administración</h2>
|
||||
<p>Introduce tus credenciales para acceder al panel de administración</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="login-form">
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Usuario</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Introduce usuario"
|
||||
required
|
||||
autoFocus
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Contraseña</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Introduce contraseña"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="login-button"
|
||||
disabled={loading || !username || !password}
|
||||
>
|
||||
{loading ? 'Iniciando sesión...' : 'Iniciar sesión'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="login-footer">
|
||||
<p className="help-text">
|
||||
Credenciales por defecto: <code>admin</code> / <code>admin123</code>
|
||||
</p>
|
||||
<p className="warning-text">
|
||||
⚠️ ¡Cambia la contraseña por defecto tras el primer inicio de sesión!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginForm;
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './AdminComponents.css';
|
||||
|
||||
const SEARCH_DEBOUNCE_MS = 400;
|
||||
|
||||
function MedicineManagement() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [medicines, setMedicines] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const q = searchQuery.trim();
|
||||
if (q.length < 2) {
|
||||
setMedicines([]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/medicines/search?q=${encodeURIComponent(q)}`,
|
||||
{ credentials: 'include', signal: controller.signal }
|
||||
);
|
||||
const data = await response.json();
|
||||
setMedicines(Array.isArray(data) ? data : []);
|
||||
} catch (error) {
|
||||
if (error.name === 'AbortError') return;
|
||||
console.error('Error searching medicines:', error);
|
||||
alert('Error al buscar medicamentos en la API CIMA');
|
||||
} finally {
|
||||
if (!controller.signal.aborted) setLoading(false);
|
||||
}
|
||||
}, SEARCH_DEBOUNCE_MS);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
controller.abort();
|
||||
};
|
||||
}, [searchQuery]);
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<div className="section-header">
|
||||
<h2>Buscar Medicamentos (API CIMA)</h2>
|
||||
</div>
|
||||
|
||||
<div className="info-box">
|
||||
<p>ℹ️ Los medicamentos ahora se obtienen directamente de la <strong>API de CIMA</strong> (Agencia Española de Medicamentos y Productos Sanitarios).</p>
|
||||
<p>Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-form">
|
||||
<div className="form-group">
|
||||
<label>Buscar medicamentos</label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Escribe el nombre de un medicamento..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && <div className="loading">Buscando en API CIMA...</div>}
|
||||
|
||||
{!loading && medicines.length > 0 && (
|
||||
<div className="admin-list">
|
||||
<p className="info-text">Se encontraron {medicines.length} medicamentos</p>
|
||||
{medicines.map((medicine) => (
|
||||
<div key={medicine.nregistro} className="admin-item">
|
||||
<div className="item-content">
|
||||
<h4>{medicine.name}</h4>
|
||||
{medicine.active_ingredient && (
|
||||
<p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p>
|
||||
)}
|
||||
<p>
|
||||
{medicine.dosage && <span><strong>Dosis:</strong> {medicine.dosage}</span>}
|
||||
{medicine.dosage && medicine.form && ' • '}
|
||||
{medicine.form && <span><strong>Forma:</strong> {medicine.form}</span>}
|
||||
</p>
|
||||
<p className="medicine-meta">
|
||||
<strong>Laboratorio:</strong> {medicine.laboratory} •
|
||||
<strong> Nº Registro:</strong> {medicine.nregistro} •
|
||||
{medicine.generic ? ' Genérico' : ' Marca'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && searchQuery.trim().length >= 2 && medicines.length === 0 && (
|
||||
<p className="empty-state">No se encontraron medicamentos con ese nombre.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MedicineManagement;
|
||||
@@ -0,0 +1,715 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import './AdminComponents.css';
|
||||
import { DAY_KEYS, DAY_LABEL } from '../../utils/hours';
|
||||
|
||||
function emptyHoursDraft() {
|
||||
const draft = {};
|
||||
for (const day of DAY_KEYS) {
|
||||
draft[day] = { open: '09:00', close: '21:00', closed: true };
|
||||
}
|
||||
return draft;
|
||||
}
|
||||
|
||||
function hoursToDraft(raw) {
|
||||
let parsed = null;
|
||||
if (raw) {
|
||||
try { parsed = typeof raw === 'string' ? JSON.parse(raw) : raw; }
|
||||
catch { parsed = null; }
|
||||
}
|
||||
const draft = {};
|
||||
for (const day of DAY_KEYS) {
|
||||
const v = parsed && parsed[day];
|
||||
if (Array.isArray(v) && v.length === 2) {
|
||||
draft[day] = { open: v[0], close: v[1], closed: false };
|
||||
} else {
|
||||
draft[day] = { open: '09:00', close: '21:00', closed: true };
|
||||
}
|
||||
}
|
||||
return draft;
|
||||
}
|
||||
|
||||
function draftToHours(draft) {
|
||||
const out = {};
|
||||
let hasAny = false;
|
||||
for (const day of DAY_KEYS) {
|
||||
const d = draft[day];
|
||||
if (d && !d.closed && d.open && d.close) {
|
||||
out[day] = [d.open, d.close];
|
||||
hasAny = true;
|
||||
} else {
|
||||
out[day] = null;
|
||||
}
|
||||
}
|
||||
return hasAny ? out : null;
|
||||
}
|
||||
|
||||
/** Distance in metres between two WGS84 points */
|
||||
function haversineMeters(lat1, lon1, lat2, lon2) {
|
||||
const R = 6371000;
|
||||
const toRad = (d) => (d * Math.PI) / 180;
|
||||
const dLat = toRad(lat2 - lat1);
|
||||
const dLon = toRad(lon2 - lon1);
|
||||
const a =
|
||||
Math.sin(dLat / 2) ** 2 +
|
||||
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
|
||||
return 2 * R * Math.asin(Math.sqrt(Math.min(1, a)));
|
||||
}
|
||||
|
||||
const REGION_PRESETS = [
|
||||
{ id: 'custom', label: 'Coordenadas personalizadas', lat: '', lon: '', radio: '' },
|
||||
{
|
||||
id: 'rubi',
|
||||
label: 'Ejemplo: Área de Rubí (1.5 km)',
|
||||
lat: '41.5631',
|
||||
lon: '2.0038',
|
||||
radio: '1500',
|
||||
},
|
||||
];
|
||||
|
||||
async function geocodeErrorMessage(response) {
|
||||
const text = await response.text();
|
||||
let body = {};
|
||||
try {
|
||||
body = text ? JSON.parse(text) : {};
|
||||
} catch {
|
||||
/* non-JSON */
|
||||
}
|
||||
if (typeof body.error === 'string' && body.error.trim()) return body.error;
|
||||
if (response.status === 401) {
|
||||
return 'Sesión expirada o no has iniciado sesión. Inicia sesión de nuevo en el panel Admin y reintenta.';
|
||||
}
|
||||
if (response.status === 404) {
|
||||
const looksLikeHtml = /<!DOCTYPE|<html[\s>]/i.test(text || '');
|
||||
if (looksLikeHtml) {
|
||||
return 'La app no pudo conectar con la API (404). Usa http://localhost:3000 con frontend y backend activos.';
|
||||
}
|
||||
return 'Servicio de geocodificación no encontrado. Actualiza el backend y reinícialo.';
|
||||
}
|
||||
return `Búsqueda fallida (HTTP ${response.status}).`;
|
||||
}
|
||||
|
||||
function PharmacyManagement() {
|
||||
const [pharmacies, setPharmacies] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingPharmacy, setEditingPharmacy] = useState(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
});
|
||||
const [hoursDraft, setHoursDraft] = useState(() => emptyHoursDraft());
|
||||
|
||||
const [cityQuery, setCityQuery] = useState('');
|
||||
const [cityLookupLoading, setCityLookupLoading] = useState(false);
|
||||
const [cityLookupMessage, setCityLookupMessage] = useState(null);
|
||||
|
||||
const [regionLat, setRegionLat] = useState('41.5631');
|
||||
const [regionLon, setRegionLon] = useState('2.0038');
|
||||
const [regionRadio, setRegionRadio] = useState('1500');
|
||||
const [regionPreset, setRegionPreset] = useState('rubi');
|
||||
const [filterByRegion, setFilterByRegion] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importFeedback, setImportFeedback] = useState(null);
|
||||
/** @type {'webhook' | 'osm' | 'openData'} */
|
||||
const [importMode, setImportMode] = useState('osm');
|
||||
const [openDataUrl, setOpenDataUrl] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetchPharmacies();
|
||||
}, []);
|
||||
|
||||
const fetchPharmacies = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/pharmacies', {
|
||||
credentials: 'include',
|
||||
});
|
||||
const data = await response.json();
|
||||
setPharmacies(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching pharmacies:', error);
|
||||
alert('Error al cargar farmacias');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const applyPreset = (id) => {
|
||||
setRegionPreset(id);
|
||||
const p = REGION_PRESETS.find((x) => x.id === id);
|
||||
if (!p || id === 'custom') return;
|
||||
setRegionLat(p.lat);
|
||||
setRegionLon(p.lon);
|
||||
setRegionRadio(p.radio);
|
||||
};
|
||||
|
||||
const displayedPharmacies = useMemo(() => {
|
||||
if (!filterByRegion) return pharmacies;
|
||||
const lat = parseFloat(regionLat);
|
||||
const lon = parseFloat(regionLon);
|
||||
const r = parseFloat(regionRadio);
|
||||
if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(r)) {
|
||||
return pharmacies;
|
||||
}
|
||||
return pharmacies.filter((p) => {
|
||||
if (p.latitude == null || p.longitude == null) return false;
|
||||
return haversineMeters(lat, lon, p.latitude, p.longitude) <= r;
|
||||
});
|
||||
}, [pharmacies, filterByRegion, regionLat, regionLon, regionRadio]);
|
||||
|
||||
const handleCityLookup = async (e) => {
|
||||
e?.preventDefault();
|
||||
const q = cityQuery.trim();
|
||||
if (!q) {
|
||||
setCityLookupMessage({ type: 'err', text: 'Introduce una ciudad o lugar.' });
|
||||
return;
|
||||
}
|
||||
setCityLookupLoading(true);
|
||||
setCityLookupMessage(null);
|
||||
try {
|
||||
const response = await fetch(`/api/admin/geocode?q=${encodeURIComponent(q)}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(await geocodeErrorMessage(response));
|
||||
}
|
||||
const data = await response.json();
|
||||
setRegionLat(String(data.lat));
|
||||
setRegionLon(String(data.lon));
|
||||
setRegionRadio(String(data.radius));
|
||||
setRegionPreset('custom');
|
||||
setCityLookupMessage({
|
||||
type: 'ok',
|
||||
text: `Using: ${data.displayName} — radius ~${data.radius} m (you can edit below).`,
|
||||
});
|
||||
} catch (err) {
|
||||
setCityLookupMessage({ type: 'err', text: err.message });
|
||||
} finally {
|
||||
setCityLookupLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePharmacyImport = async () => {
|
||||
setImporting(true);
|
||||
setImportFeedback(null);
|
||||
try {
|
||||
if (importMode === 'webhook') {
|
||||
const body = {};
|
||||
const lat = parseFloat(regionLat);
|
||||
const lon = parseFloat(regionLon);
|
||||
const radio = parseFloat(regionRadio);
|
||||
if (Number.isFinite(lat) && Number.isFinite(lon) && Number.isFinite(radio)) {
|
||||
body.lat = lat;
|
||||
body.lon = lon;
|
||||
body.radio = radio;
|
||||
}
|
||||
const response = await fetch('/api/admin/pharmacies/import-webhook', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || `Import failed (${response.status})`);
|
||||
}
|
||||
setImportFeedback({
|
||||
type: 'success',
|
||||
text: `[n8n] Imported ${data.inserted} new. Skipped ${data.skipped} duplicate(s). ${data.invalid || 0} invalid. ${data.totalReceived} from webhook.`,
|
||||
});
|
||||
await fetchPharmacies();
|
||||
return;
|
||||
}
|
||||
|
||||
if (importMode === 'openData') {
|
||||
const url = openDataUrl.trim();
|
||||
if (!url) {
|
||||
throw new Error('Paste an open-data JSON URL (array or GeoJSON).');
|
||||
}
|
||||
const response = await fetch('/api/admin/pharmacies/import-external', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ source: 'openData', openDataUrl: url }),
|
||||
});
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || `Import failed (${response.status})`);
|
||||
}
|
||||
const label = data.message || `openData: ${data.totalReceived} rows`;
|
||||
setImportFeedback({
|
||||
type: 'success',
|
||||
text: `${label}. Inserted ${data.inserted}, skipped ${data.skipped}, invalid ${data.invalid || 0}.`,
|
||||
});
|
||||
await fetchPharmacies();
|
||||
return;
|
||||
}
|
||||
|
||||
const lat = parseFloat(regionLat);
|
||||
const lon = parseFloat(regionLon);
|
||||
const radio = parseFloat(regionRadio);
|
||||
if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(radio)) {
|
||||
throw new Error('Establece latitud, longitud y radio (usa Buscar ciudad o un preset).');
|
||||
}
|
||||
const response = await fetch('/api/admin/pharmacies/import-external', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
source: importMode,
|
||||
lat,
|
||||
lon,
|
||||
radio,
|
||||
}),
|
||||
});
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || `Import failed (${response.status})`);
|
||||
}
|
||||
const src = data.source === 'osm' ? 'OSM' : 'OpenStreetMap';
|
||||
setImportFeedback({
|
||||
type: 'success',
|
||||
text: `[${src}] ${data.message || `Received ${data.totalReceived} pharmacies.`} Inserted ${data.inserted}, skipped ${data.skipped}, invalid ${data.invalid || 0}.`,
|
||||
});
|
||||
await fetchPharmacies();
|
||||
} catch (error) {
|
||||
setImportFeedback({ type: 'error', text: error.message });
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (saving) return;
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formData,
|
||||
latitude: formData.latitude ? parseFloat(formData.latitude) : null,
|
||||
longitude: formData.longitude ? parseFloat(formData.longitude) : null,
|
||||
opening_hours: draftToHours(hoursDraft),
|
||||
};
|
||||
|
||||
if (editingPharmacy) {
|
||||
const response = await fetch(`/api/admin/pharmacies/${editingPharmacy.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Error al actualizar farmacia');
|
||||
}
|
||||
} else {
|
||||
const response = await fetch('/api/admin/pharmacies', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Error al crear farmacia');
|
||||
}
|
||||
}
|
||||
|
||||
resetForm();
|
||||
fetchPharmacies();
|
||||
alert(editingPharmacy ? '¡Farmacia actualizada!' : '¡Farmacia añadida!');
|
||||
} catch (error) {
|
||||
console.error('Error saving pharmacy:', error);
|
||||
alert(`Error al guardar farmacia: ${error.message}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (pharmacy) => {
|
||||
setEditingPharmacy(pharmacy);
|
||||
setFormData({
|
||||
name: pharmacy.name || '',
|
||||
address: pharmacy.address || '',
|
||||
phone: pharmacy.phone || '',
|
||||
latitude: pharmacy.latitude ?? '',
|
||||
longitude: pharmacy.longitude ?? '',
|
||||
});
|
||||
setHoursDraft(hoursToDraft(pharmacy.opening_hours));
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('¿Estás seguro de que quieres eliminar esta farmacia?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/pharmacies/${id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al eliminar farmacia');
|
||||
|
||||
fetchPharmacies();
|
||||
alert('¡Farmacia eliminada!');
|
||||
} catch (error) {
|
||||
console.error('Error deleting pharmacy:', error);
|
||||
alert('Error al eliminar farmacia');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
});
|
||||
setHoursDraft(emptyHoursDraft());
|
||||
setEditingPharmacy(null);
|
||||
setShowForm(false);
|
||||
};
|
||||
|
||||
const updateDay = (day, patch) => {
|
||||
setHoursDraft((prev) => ({ ...prev, [day]: { ...prev[day], ...patch } }));
|
||||
};
|
||||
|
||||
const onRegionFieldChange = (setter) => (e) => {
|
||||
setRegionPreset('custom');
|
||||
setter(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<div className="section-header">
|
||||
<h2>Gestionar Farmacias</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary"
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowForm(true);
|
||||
}}
|
||||
>
|
||||
+ Añadir Nueva Farmacia
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pharmacy-tools-card">
|
||||
<h3>Ciudad, región e importación</h3>
|
||||
<p className="pharmacy-tools-hint">
|
||||
<strong>Buscar ciudad</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones.
|
||||
Elige una <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '}
|
||||
<strong>URL de datos abiertos</strong> carga JSON alojado por ti. Geocodificación usa{' '}
|
||||
<a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">
|
||||
OpenStreetMap
|
||||
</a>{' '}
|
||||
(Nominatim).
|
||||
</p>
|
||||
|
||||
<form className="city-lookup-form" onSubmit={handleCityLookup}>
|
||||
<div className="form-group city-lookup-input-wrap">
|
||||
<label htmlFor="city-finder">Buscar ciudad</label>
|
||||
<input
|
||||
id="city-finder"
|
||||
type="search"
|
||||
placeholder="Ej: Rubí, Madrid, Valencia…"
|
||||
value={cityQuery}
|
||||
onChange={(e) => {
|
||||
setCityQuery(e.target.value);
|
||||
setCityLookupMessage(null);
|
||||
}}
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-secondary city-lookup-submit"
|
||||
disabled={cityLookupLoading}
|
||||
>
|
||||
{cityLookupLoading ? 'Buscando…' : 'Buscar ciudad'}
|
||||
</button>
|
||||
</form>
|
||||
{cityLookupMessage && (
|
||||
<p
|
||||
className={`city-lookup-feedback ${cityLookupMessage.type === 'ok' ? 'ok' : 'err'}`}
|
||||
role="status"
|
||||
>
|
||||
{cityLookupMessage.text}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="region-presets">
|
||||
<label htmlFor="region-preset">Preset de área</label>
|
||||
<select
|
||||
id="region-preset"
|
||||
value={regionPreset}
|
||||
onChange={(e) => applyPreset(e.target.value)}
|
||||
>
|
||||
{REGION_PRESETS.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="region-grid">
|
||||
<div className="form-group">
|
||||
<label htmlFor="region-lat">Latitud</label>
|
||||
<input
|
||||
id="region-lat"
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={regionLat}
|
||||
onChange={onRegionFieldChange(setRegionLat)}
|
||||
placeholder="41.5631"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="region-lon">Longitud</label>
|
||||
<input
|
||||
id="region-lon"
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={regionLon}
|
||||
onChange={onRegionFieldChange(setRegionLon)}
|
||||
placeholder="2.0038"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="region-radio">Radio (m)</label>
|
||||
<input
|
||||
id="region-radio"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={regionRadio}
|
||||
onChange={onRegionFieldChange(setRegionRadio)}
|
||||
placeholder="1500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="import-mode-row">
|
||||
<div className="form-group import-mode-select-wrap">
|
||||
<label htmlFor="import-mode">Fuente de datos</label>
|
||||
<select
|
||||
id="import-mode"
|
||||
value={importMode}
|
||||
onChange={(e) => {
|
||||
setImportMode(e.target.value);
|
||||
setImportFeedback(null);
|
||||
}}
|
||||
>
|
||||
<option value="osm">OpenStreetMap (Overpass, gratuito)</option>
|
||||
<option value="webhook">n8n webhook (heredado)</option>
|
||||
<option value="openData">URL de datos abiertos JSON</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{importMode === 'openData' && (
|
||||
<div className="form-group open-data-url-row">
|
||||
<label htmlFor="open-data-url">URL JSON</label>
|
||||
<input
|
||||
id="open-data-url"
|
||||
type="url"
|
||||
placeholder="https://…/pharmacies.json"
|
||||
value={openDataUrl}
|
||||
onChange={(e) => setOpenDataUrl(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="tool-actions-row">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary btn-import-webhook"
|
||||
onClick={handlePharmacyImport}
|
||||
disabled={importing}
|
||||
>
|
||||
{importing
|
||||
? 'Importando…'
|
||||
: importMode === 'webhook'
|
||||
? 'Importar desde webhook'
|
||||
: importMode === 'openData'
|
||||
? 'Importar desde URL'
|
||||
: `Importar desde ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
|
||||
</button>
|
||||
<label className="filter-region-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filterByRegion}
|
||||
onChange={(e) => setFilterByRegion(e.target.checked)}
|
||||
/>
|
||||
Mostrar solo farmacias dentro del radio
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{importFeedback && (
|
||||
<div
|
||||
className={`import-feedback ${importFeedback.type === 'success' ? 'success' : 'error'}`}
|
||||
role="status"
|
||||
>
|
||||
{importFeedback.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
<h3>{editingPharmacy ? 'Editar Farmacia' : 'Añadir Nueva Farmacia'}</h3>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Nombre *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Dirección *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address}
|
||||
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Teléfono</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>Latitud</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
value={formData.latitude}
|
||||
onChange={(e) => setFormData({ ...formData, latitude: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Longitud</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
value={formData.longitude}
|
||||
onChange={(e) => setFormData({ ...formData, longitude: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset className="hours-editor">
|
||||
<legend>Horario de apertura</legend>
|
||||
<p className="hours-editor-hint">Marca un día como <em>Cerrado</em> si la farmacia no abre ese día.</p>
|
||||
{DAY_KEYS.map((day) => {
|
||||
const d = hoursDraft[day];
|
||||
return (
|
||||
<div key={day} className={`hours-row ${d.closed ? 'is-closed' : ''}`}>
|
||||
<span className="hours-day">{DAY_LABEL[day]}</span>
|
||||
<label className="hours-closed-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={d.closed}
|
||||
onChange={(e) => updateDay(day, { closed: e.target.checked })}
|
||||
/>
|
||||
Cerrado
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={d.open}
|
||||
disabled={d.closed}
|
||||
onChange={(e) => updateDay(day, { open: e.target.value })}
|
||||
aria-label={`${DAY_LABEL[day]} abre a las`}
|
||||
/>
|
||||
<span className="hours-sep">–</span>
|
||||
<input
|
||||
type="time"
|
||||
value={d.close}
|
||||
disabled={d.closed}
|
||||
onChange={(e) => updateDay(day, { close: e.target.value })}
|
||||
aria-label={`${DAY_LABEL[day]} cierra a las`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</fieldset>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary" disabled={saving}>
|
||||
{saving ? 'Guardando...' : editingPharmacy ? 'Actualizar' : 'Añadir'} Farmacia
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={resetForm} disabled={saving}>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="loading">Cargando farmacias...</div>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
<p className="list-meta">
|
||||
Mostrando {displayedPharmacies.length} de {pharmacies.length} farmacias
|
||||
{filterByRegion && ' (dentro del radio)'}
|
||||
</p>
|
||||
{displayedPharmacies.length === 0 ? (
|
||||
<p className="empty-state">
|
||||
{pharmacies.length === 0
|
||||
? 'Aún no hay farmacias. Importa desde webhook o añade una manualmente.'
|
||||
: 'No hay farmacias en este radio con coordenadas. Amplía el radio, busca otra ciudad o desactiva el filtro de región.'}
|
||||
</p>
|
||||
) : (
|
||||
displayedPharmacies.map((pharmacy) => (
|
||||
<div key={pharmacy.id} className="admin-item">
|
||||
<div className="item-content">
|
||||
<h4>{pharmacy.name}</h4>
|
||||
<p>📍 {pharmacy.address}</p>
|
||||
{pharmacy.phone && <p>📞 {pharmacy.phone}</p>}
|
||||
{(pharmacy.latitude != null || pharmacy.longitude != null) && (
|
||||
<p>
|
||||
🌐 {pharmacy.latitude}, {pharmacy.longitude}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="item-actions">
|
||||
<button type="button" className="btn-edit" onClick={() => handleEdit(pharmacy)}>
|
||||
Editar
|
||||
</button>
|
||||
<button type="button" className="btn-delete" onClick={() => handleDelete(pharmacy.id)}>
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PharmacyManagement;
|
||||
@@ -0,0 +1,404 @@
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import './AdminComponents.css';
|
||||
|
||||
const MAX_PHARMACY_RESULTS = 25;
|
||||
|
||||
function normalize(s) {
|
||||
return (s || '').toString().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
|
||||
}
|
||||
|
||||
function PharmacyMedicineLink() {
|
||||
const [pharmacies, setPharmacies] = useState([]);
|
||||
const [medicineSearch, setMedicineSearch] = useState('');
|
||||
const [medicineResults, setMedicineResults] = useState([]);
|
||||
const [selectedPharmacy, setSelectedPharmacy] = useState(null);
|
||||
const [selectedMedicine, setSelectedMedicine] = useState(null);
|
||||
const [pharmacyMedicines, setPharmacyMedicines] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [pharmacyQuery, setPharmacyQuery] = useState('');
|
||||
const [pharmacyDropdownOpen, setPharmacyDropdownOpen] = useState(false);
|
||||
const pharmacyInputRef = useRef(null);
|
||||
const [formData, setFormData] = useState({
|
||||
pharmacy_id: '',
|
||||
price: '',
|
||||
stock: ''
|
||||
});
|
||||
|
||||
const filteredPharmacies = useMemo(() => {
|
||||
const q = normalize(pharmacyQuery).trim();
|
||||
if (!q) return pharmacies.slice(0, MAX_PHARMACY_RESULTS);
|
||||
const tokens = q.split(/\s+/).filter(Boolean);
|
||||
return pharmacies
|
||||
.filter(p => {
|
||||
const hay = `${normalize(p.name)} ${normalize(p.address)}`;
|
||||
return tokens.every(tok => hay.includes(tok));
|
||||
})
|
||||
.slice(0, MAX_PHARMACY_RESULTS);
|
||||
}, [pharmacies, pharmacyQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPharmacies();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPharmacy) {
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
}
|
||||
}, [selectedPharmacy]);
|
||||
|
||||
// Buscar medicamentos en la API de CIMA mientras el usuario escribe
|
||||
useEffect(() => {
|
||||
const q = medicineSearch.trim();
|
||||
if (q.length < 2) {
|
||||
setMedicineResults([]);
|
||||
setSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(async () => {
|
||||
setSearching(true);
|
||||
try {
|
||||
const response = await fetch(`/api/medicines/search?q=${encodeURIComponent(q)}`, {
|
||||
credentials: 'include',
|
||||
signal: controller.signal,
|
||||
});
|
||||
const data = await response.json();
|
||||
setMedicineResults(Array.isArray(data) ? data : []);
|
||||
} catch (error) {
|
||||
if (error.name === 'AbortError') return;
|
||||
console.error('Error searching medicines:', error);
|
||||
} finally {
|
||||
if (!controller.signal.aborted) setSearching(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
controller.abort();
|
||||
};
|
||||
}, [medicineSearch]);
|
||||
|
||||
const fetchPharmacies = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/pharmacies', {
|
||||
credentials: 'include',
|
||||
});
|
||||
const data = await response.json();
|
||||
setPharmacies(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching pharmacies:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPharmacyMedicines = async (pharmacyId) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/admin/pharmacies/${pharmacyId}/medicines`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
const data = await response.json();
|
||||
setPharmacyMedicines(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching pharmacy medicines:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!selectedMedicine) {
|
||||
alert('Por favor, selecciona un medicamento primero');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
pharmacy_id: parseInt(formData.pharmacy_id),
|
||||
medicine_nregistro: selectedMedicine.nregistro,
|
||||
medicine_name: selectedMedicine.name,
|
||||
price: formData.price ? parseFloat(formData.price) : null,
|
||||
stock: formData.stock ? parseInt(formData.stock) : 0
|
||||
};
|
||||
|
||||
const response = await fetch('/api/admin/pharmacy-medicines', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al vincular medicamento a farmacia');
|
||||
|
||||
resetForm();
|
||||
if (selectedPharmacy) {
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
}
|
||||
alert('¡Medicamento vinculado a la farmacia correctamente!');
|
||||
} catch (error) {
|
||||
console.error('Error linking medicine:', error);
|
||||
alert('Error al vincular medicamento a farmacia');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (id, price, stock) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ price, stock })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al actualizar');
|
||||
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
alert('¡Actualizado correctamente!');
|
||||
} catch (error) {
|
||||
console.error('Error updating:', error);
|
||||
alert('Error al actualizar');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('¿Eliminar este medicamento de la farmacia?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al eliminar');
|
||||
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
alert('¡Medicamento eliminado de la farmacia!');
|
||||
} catch (error) {
|
||||
console.error('Error deleting:', error);
|
||||
alert('Error al eliminar medicamento');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
pharmacy_id: selectedPharmacy ? selectedPharmacy.id.toString() : '',
|
||||
price: '',
|
||||
stock: ''
|
||||
});
|
||||
setSelectedMedicine(null);
|
||||
setMedicineSearch('');
|
||||
setMedicineResults([]);
|
||||
};
|
||||
|
||||
const selectMedicine = (medicine) => {
|
||||
setSelectedMedicine(medicine);
|
||||
setMedicineSearch(medicine.name);
|
||||
setMedicineResults([]);
|
||||
};
|
||||
|
||||
const pickPharmacy = (pharmacy) => {
|
||||
setSelectedPharmacy(pharmacy);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: pharmacy.id.toString() }));
|
||||
setPharmacyQuery(`${pharmacy.name} — ${pharmacy.address}`);
|
||||
setPharmacyDropdownOpen(false);
|
||||
};
|
||||
|
||||
const clearPharmacy = () => {
|
||||
setSelectedPharmacy(null);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: '' }));
|
||||
setPharmacyQuery('');
|
||||
setPharmacyDropdownOpen(true);
|
||||
setTimeout(() => pharmacyInputRef.current?.focus(), 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2>Vincular Medicamento a Farmacia</h2>
|
||||
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label>Farmacia *</label>
|
||||
<input
|
||||
ref={pharmacyInputRef}
|
||||
type="text"
|
||||
value={pharmacyQuery}
|
||||
onChange={(e) => {
|
||||
setPharmacyQuery(e.target.value);
|
||||
if (selectedPharmacy) {
|
||||
setSelectedPharmacy(null);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: '' }));
|
||||
}
|
||||
setPharmacyDropdownOpen(true);
|
||||
}}
|
||||
onFocus={() => setPharmacyDropdownOpen(true)}
|
||||
onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
|
||||
placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'}
|
||||
autoComplete="off"
|
||||
required={!selectedPharmacy}
|
||||
/>
|
||||
{!selectedPharmacy && pharmacyDropdownOpen && (
|
||||
<div className="medicine-search-results">
|
||||
{filteredPharmacies.length === 0 ? (
|
||||
<div className="search-result-item search-result-item--empty">
|
||||
<span>No hay farmacias que coincidan con "{pharmacyQuery}"</span>
|
||||
</div>
|
||||
) : (
|
||||
filteredPharmacies.map((pharmacy) => (
|
||||
<div
|
||||
key={pharmacy.id}
|
||||
className="search-result-item"
|
||||
onMouseDown={(e) => { e.preventDefault(); pickPharmacy(pharmacy); }}
|
||||
>
|
||||
<strong>{pharmacy.name}</strong>
|
||||
<span>{pharmacy.address}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{selectedPharmacy && (
|
||||
<div className="selected-medicine-info">
|
||||
<p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
|
||||
<p className="medicine-details">{selectedPharmacy.address}</p>
|
||||
<button type="button" className="btn-small" onClick={clearPharmacy}>
|
||||
Cambiar farmacia
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Buscar Medicamento (API CIMA) *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={medicineSearch}
|
||||
onChange={(e) => {
|
||||
setMedicineSearch(e.target.value);
|
||||
setSelectedMedicine(null);
|
||||
}}
|
||||
placeholder="Escribe para buscar medicamentos en CIMA..."
|
||||
required
|
||||
/>
|
||||
{searching && <p className="loading-text">Buscando...</p>}
|
||||
|
||||
{medicineResults.length > 0 && !selectedMedicine && (
|
||||
<div className="medicine-search-results">
|
||||
{medicineResults.slice(0, 10).map((medicine) => (
|
||||
<div
|
||||
key={medicine.nregistro}
|
||||
className="search-result-item"
|
||||
onClick={() => selectMedicine(medicine)}
|
||||
>
|
||||
<strong>{medicine.name}</strong>
|
||||
{medicine.active_ingredient && <span> - {medicine.active_ingredient}</span>}
|
||||
{medicine.dosage && <span> ({medicine.dosage})</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedMedicine && (
|
||||
<div className="selected-medicine-info">
|
||||
<p>✅ Selected: <strong>{selectedMedicine.name}</strong></p>
|
||||
<p className="medicine-details">
|
||||
{selectedMedicine.active_ingredient && `Principio activo: ${selectedMedicine.active_ingredient} • `}
|
||||
{selectedMedicine.dosage && `Dosis: ${selectedMedicine.dosage} • `}
|
||||
Nº Registro: {selectedMedicine.nregistro}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-small"
|
||||
onClick={() => {
|
||||
setSelectedMedicine(null);
|
||||
setMedicineSearch('');
|
||||
}}
|
||||
>
|
||||
Cambiar medicamento
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>Precio (€)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.price}
|
||||
onChange={(e) => setFormData({ ...formData, price: e.target.value })}
|
||||
placeholder="e.g., 12.50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Stock</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stock}
|
||||
onChange={(e) => setFormData({ ...formData, stock: e.target.value })}
|
||||
placeholder="e.g., 50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">
|
||||
Vincular Medicamento
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={resetForm}>
|
||||
Reiniciar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{selectedPharmacy && (
|
||||
<div className="pharmacy-medicines-section">
|
||||
<h3>Medicamentos en {selectedPharmacy.name}</h3>
|
||||
{loading ? (
|
||||
<div className="loading">Cargando...</div>
|
||||
) : pharmacyMedicines.length === 0 ? (
|
||||
<p className="empty-state">Aún no hay medicamentos vinculados a esta farmacia.</p>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
{pharmacyMedicines.map((pm) => (
|
||||
<div key={pm.id} className="admin-item">
|
||||
<div className="item-content">
|
||||
<h4>{pm.medicine_name}</h4>
|
||||
<p>
|
||||
<strong>Precio:</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : 'No definido'} •
|
||||
<strong> Stock:</strong> {pm.stock || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="item-actions">
|
||||
<button
|
||||
className="btn-edit"
|
||||
onClick={() => {
|
||||
const newPrice = prompt('Introduce nuevo precio:', pm.price || '');
|
||||
const newStock = prompt('Introduce nuevo stock:', pm.stock || '0');
|
||||
if (newPrice !== null && newStock !== null) {
|
||||
handleUpdate(pm.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Actualizar
|
||||
</button>
|
||||
<button className="btn-delete" onClick={() => handleDelete(pm.id)}>
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PharmacyMedicineLink;
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
export function IconHome({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconSearch({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconScan({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<path d="M3 7V5a2 2 0 0 1 2-2h2" />
|
||||
<path d="M17 3h2a2 2 0 0 1 2 2v2" />
|
||||
<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
|
||||
<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
|
||||
<path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconBell({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
|
||||
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconUser({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCog({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconLogo({ size = 24, ...props }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
|
||||
<path d="M19 8h-1V6a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2H5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3zM8 6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H8V6zm4 11a3 3 0 1 1 3-3 3 3 0 0 1-3 3z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user