// ProfessionalFlow.jsx — Search → Quick-Book → SIS Verification → Time Slot → Confirmation → MisReservas / CancelacionFlow // ── Slot formatting helper ──────────────────────────────────────────────────── const fmtSlot = (slot) => { const h = parseInt(slot, 10); const start = h.toString().padStart(2, '0') + ':00'; const end = (h + 1).toString().padStart(2, '0') + ':00'; return `${start} – ${end}`; }; // ─── TEST MODE ──────────────────────────────────────────────────────────────── // Set to true to show "Simular pago exitoso" button in the payment step. // Set to false (or remove) before deploying to production. const TEST_MODE = true; const MOCK_RESERVAS = [ { id: 'LKT-A1B2C3', box: 'Box Dental Premium', address: 'Av. Apoquindo 4501, piso 3', fecha: new Date(Date.now() + 1000*60*60*2), slot: 10, monto: 9350, status: 'confirmed', medico: 'Dr. Carlos Muñoz' }, { id: 'LKT-D4E5F6', box: 'Box Kinesiología', address: 'Av. Providencia 2124, of. 502', fecha: new Date(Date.now() + 1000*60*60*30), slot: 14, monto: 6600, status: 'confirmed', medico: 'Dra. Ana Torres' }, { id: 'LKT-G7H8I9', box: 'Box Psicología', address: 'Av. Irarrázaval 1890, of. 201', fecha: new Date(Date.now() - 1000*60*60*48), slot: 9, monto: 4950, status: 'completed', medico: 'Dr. Pedro Soto' }, ]; const BOXES = [ { id: 1, name: 'Box Dental Premium', location: 'Las Condes', address: 'Av. Apoquindo 4501, piso 3', price: 8500, rating: 4.9, reviews: 124, available: true, equip: ['Unidad Dental', 'PC Clínico', 'Lavamanos', 'Compresor'], tags: ['Dental'], img: null, owner: 'Clínica Sonrisa', }, { id: 2, name: 'Box Kinesiología', location: 'Providencia', address: 'Av. Providencia 2124, of. 502', price: 6000, rating: 4.7, reviews: 88, available: true, equip: ['Camilla Eléctrica', 'PC Clínico', 'Lavamanos'], tags: ['Kinesiología'], img: null, owner: 'Centro Rehabilita', }, { id: 3, name: 'Box Psicología', location: 'Ñuñoa', address: 'Av. Irarrázaval 1890, of. 201', price: 4500, rating: 4.8, reviews: 56, available: false, equip: ['PC Clínico', 'Sillones', 'Climatización'], tags: ['Psicología'], img: null, owner: 'Espacio Mental', }, { id: 4, name: 'Box Medicina General', location: 'Santiago Centro', address: 'Huérfanos 835, of. 310', price: 5500, rating: 4.6, reviews: 200, available: true, equip: ['Camilla', 'PC Clínico', 'Lavamanos', 'Estetoscopio'], tags: ['Medicina General'], img: null, owner: 'MedCenter SpA', }, ]; const EQUIP_ICONS = { 'Unidad Dental': '🦷', 'PC Clínico': '💻', 'Lavamanos': '🚿', 'Compresor': '⚙️', 'Camilla Eléctrica': '🛏️', 'Camilla': '🛏️', 'Sillones': '🪑', 'Climatización': '❄️', 'Estetoscopio': '🩺', }; // ─── PROFESSIONAL HEADER (Reusable) ──────────────────────────────────────── const ProfessionalHeader = ({ screenName, onLogout, onBack }) => { const userJson = localStorage.getItem('lokat_user'); const user = userJson ? JSON.parse(userJson) : null; const fullName = user?.fullName || user?.full_name || user?.email || 'Usuario'; const userInitials = fullName.split(' ').map(n => n[0]).join('').toUpperCase().substring(0, 2); const firstName = fullName.split(' ')[0]; const rnpiVerified = user?.rnpi_declared === true; return (
{/* Left: Back Button + Logo */}
{onBack && ( )}
LOKAT
/
{screenName}
{/* Right: User Avatar + Name + Logout */}
{userInitials}
{firstName}
{rnpiVerified && (
Verificado RNPI ✓
)}
); }; // ─── LEAFLET LOADER ────────────────────────────────────────────────────────── const useLeaflet = () => { const [ready, setReady] = React.useState(!!window.L); React.useEffect(() => { if (window.L) { setReady(true); return; } if (!document.getElementById('leaflet-css')) { const link = document.createElement('link'); link.id = 'leaflet-css'; link.rel = 'stylesheet'; link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'; document.head.appendChild(link); } if (!document.getElementById('leaflet-js')) { const script = document.createElement('script'); script.id = 'leaflet-js'; script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'; script.onload = () => setReady(true); document.head.appendChild(script); } else { // Script tag exists but may still be loading const existing = document.getElementById('leaflet-js'); existing.addEventListener('load', () => setReady(true)); } }, []); return ready; }; // ─── BOX MAP helpers (module-level, no React deps) ─────────────────────────── const _mapBadgeHtml = (key, priceLabel, count, isActive) => `
${priceLabel}${count > 1 ? `(${count})` : ''}
`; const _mapSinglePopup = (box) => { const ok = box.available !== false; return `
${box.name}
${box.tags?.[0] ? `
${box.tags[0]}
` : ''}
$${box.price.toLocaleString('es-CL')} /hora
${box.address}
${ok ? '● Disponible hoy' : '● No disponible'}
`; }; const _mapMultiPopup = (items) => { const rows = items.map(({ box }) => { const ok = box.available !== false; return `
${box.name}
${box.tags?.[0] ? `
${box.tags[0]}
` : ''}
$${box.price.toLocaleString('es-CL')} /h
`; }).join(''); return `
${items.length} boxes en esta ubicación
${rows}
`; }; // ─── BOX MAP ────────────────────────────────────────────────────────────────── const BoxMap = ({ geocoded, onSelect, onHighlight }) => { const mapRef = React.useRef(null); const instanceRef = React.useRef(null); const markersRef = React.useRef([]); // [{ key, marker, priceLabel, itemCount }] const [activeKey, setActiveKey] = React.useState(null); const activeKeyRef = React.useRef(null); // Keep a stable ref to onHighlight so effects don't re-run when the callback identity changes const onHighlightRef = React.useRef(onHighlight); React.useEffect(() => { onHighlightRef.current = onHighlight; }, [onHighlight]); // Group geocoded items by rounded coordinates → one marker per location const groups = React.useMemo(() => { const map = new Map(); geocoded.forEach(item => { const key = `${item.lat.toFixed(4)},${item.lng.toFixed(4)}`; if (!map.has(key)) map.set(key, { key, lat: item.lat, lng: item.lng, items: [] }); map.get(key).items.push(item); }); return [...map.values()]; }, [geocoded]); // ── Init map once ────────────────────────────────────────────────────────── React.useEffect(() => { if (!mapRef.current || instanceRef.current) return; const L = window.L; // Custom popup CSS (injected once) if (!document.getElementById('lokat-map-css')) { const s = document.createElement('style'); s.id = 'lokat-map-css'; s.textContent = ` .lokat-popup .leaflet-popup-content-wrapper{border-radius:14px;padding:0;box-shadow:0 6px 28px rgba(0,0,0,0.16);border:none} .lokat-popup .leaflet-popup-content{margin:14px 16px} .lokat-popup .leaflet-popup-tip-container{display:none} .lokat-popup .leaflet-popup-close-button{top:8px;right:10px;color:#adb5bd;font-size:18px;font-weight:400} .lokat-popup .leaflet-popup-close-button:hover{color:#1a1d23} `; document.head.appendChild(s); } const map = L.map(mapRef.current, { scrollWheelZoom: true, zoomControl: true }) .setView([-33.45, -70.65], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', maxZoom: 19, }).addTo(map); // Deselect active marker when clicking blank map map.on('click', () => { setActiveKey(null); activeKeyRef.current = null; onHighlightRef.current?.([]); }); instanceRef.current = map; return () => { map.remove(); instanceRef.current = null; }; }, []); // ── Create/replace markers when geocoded groups change ───────────────────── React.useEffect(() => { const map = instanceRef.current; if (!map || !window.L) return; const L = window.L; markersRef.current.forEach(({ marker }) => map.removeLayer(marker)); markersRef.current = []; const bounds = []; groups.forEach(({ key, lat, lng, items }) => { const minPrice = Math.min(...items.map(i => i.box.price)); const priceLabel = `$${minPrice.toLocaleString('es-CL')}`; const isActive = activeKeyRef.current === key; const makeIcon = (active) => L.divIcon({ html: _mapBadgeHtml(key, priceLabel, items.length, active), className: '', iconSize: [0, 0], iconAnchor: [0, 0], }); const popup = L.popup({ minWidth: 240, maxWidth: 310, closeButton: true, className: 'lokat-popup' }) .setContent(items.length === 1 ? _mapSinglePopup(items[0].box) : _mapMultiPopup(items)); const marker = L.marker([lat, lng], { icon: makeIcon(isActive) }) .bindPopup(popup) .addTo(map); marker.on('click', () => { setActiveKey(key); activeKeyRef.current = key; onHighlightRef.current?.(items.map(i => i.box.id)); }); markersRef.current.push({ key, marker, priceLabel, itemCount: items.length }); bounds.push([lat, lng]); }); if (bounds.length > 1) map.fitBounds(bounds, { padding: [60, 60], maxZoom: 14 }); else if (bounds.length === 1) map.setView(bounds[0], 15); }, [groups]); // eslint-disable-line react-hooks/exhaustive-deps // ── Update badge style when active marker changes (no marker recreation) ── React.useEffect(() => { if (!window.L) return; const L = window.L; markersRef.current.forEach(({ key, marker, priceLabel, itemCount }) => { marker.setIcon(L.divIcon({ html: _mapBadgeHtml(key, priceLabel, itemCount, activeKey === key), className: '', iconSize: [0, 0], iconAnchor: [0, 0], })); }); }, [activeKey]); // ── Wire up button clicks each time a popup opens ───────────────────────── React.useEffect(() => { const map = instanceRef.current; if (!map) return; const handler = (e) => { const el = e.popup.getElement(); if (!el) return; el.querySelectorAll('.lokat-map-btn').forEach(btn => { btn.onclick = () => { if (btn.dataset.available === 'false') return; const found = geocoded.find(g => String(g.box.id) === btn.dataset.id); if (found) onSelect(found.box); }; }); }; map.on('popupopen', handler); return () => map.off('popupopen', handler); }, [geocoded, onSelect]); return
; }; // ─── SEARCH RESULTS ───────────────────────────────────────────────────────── const SearchResults = ({ onSelect, onBack, isLoggedIn, onMisReservas }) => { const [boxes, setBoxes] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [filter, setFilter] = React.useState('Todos'); const [filterResolution, setFilterResolution] = React.useState('Todas'); const [sortBy, setSortBy] = React.useState('precio'); const [search, setSearch] = React.useState(''); const filters = ['Todos', 'Dental', 'Odontología', 'Kinesiología', 'Psicología', 'Medicina General', 'Dermatología']; const resolutionFilters = ['Todas', 'Solo consulta', 'Procedimientos invasivos', 'Dental/Radiología', 'Sin resolución sanitaria']; const isMobile = useWindowWidth() <= 768; // ── Map state ────────────────────────────────────────────────────────────── const leafletReady = useLeaflet(); const [mapView, setMapView] = React.useState(false); const [geocoded, setGeocoded] = React.useState([]); // [{ box, lat, lng }] const [geocoding, setGeocoding] = React.useState(false); const geocodedIds = React.useRef(new Set()); const geocodeBoxes = React.useCallback(async (toGeocode) => { if (!toGeocode.length) return; setGeocoding(true); const results = []; // Helper: strip apartment/office/floor details from an address string const simplifyAddress = (addr) => addr .replace(/,?\s*(oficina|of\.|depto\.?|departamento|piso|local|suite|torre|block|bl\.?|bodega)\s*[\w\d-]+/gi, '') .replace(/,\s*,/g, ',') // collapse double commas left by removal .replace(/,\s*$/, '') // trailing comma .trim(); // Helper: fetch one Nominatim query, returns first result or null const nominatim = async (queryStr) => { const res = await fetch( `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(queryStr)}&format=json&limit=1`, { headers: { 'Accept-Language': 'es' } } ); const data = await res.json(); return data[0] || null; }; for (const box of toGeocode) { if (geocodedIds.current.has(box.id)) continue; geocodedIds.current.add(box.id); try { await new Promise(r => setTimeout(r, 250)); // respect Nominatim rate limit // First attempt: full address let hit = await nominatim(box.address + ', Chile'); // Second attempt: simplified address (no office/floor/apt info) if (!hit) { const simplified = simplifyAddress(box.address); if (simplified !== box.address) { console.log('[MAP] Retrying with simplified address:', simplified); await new Promise(r => setTimeout(r, 250)); // rate-limit delay for retry hit = await nominatim(simplified + ', Chile'); } } if (hit) { results.push({ box, lat: parseFloat(hit.lat), lng: parseFloat(hit.lon) }); } else { console.warn('[MAP] No coordinates found for:', box.address); } } catch (err) { geocodedIds.current.delete(box.id); // allow retry console.error('[MAP] Geocode error:', box.address, err.message); } } // ── Post-process: offset any markers that share identical coordinates ── // Group results by rounded coord key, then shift duplicates so all are visible. const coordGroups = new Map(); // "lat,lng" -> [indices into results] results.forEach(({ lat, lng }, i) => { const key = `${lat.toFixed(5)},${lng.toFixed(5)}`; if (!coordGroups.has(key)) coordGroups.set(key, []); coordGroups.get(key).push(i); }); coordGroups.forEach((indices) => { if (indices.length < 2) return; // no clash, nothing to do indices.forEach((idx, dupIndex) => { results[idx].lat += 0.0002 * dupIndex; results[idx].lng += 0.0002 * dupIndex; }); }); setGeocoded(prev => [...prev, ...results]); setGeocoding(false); }, []); const handleToggleMap = () => { if (!mapView) { // Only geocode boxes that pass the current filters const notYet = filtered.filter(b => !geocodedIds.current.has(b.id)); geocodeBoxes(notYet); } setMapView(v => !v); }; React.useEffect(() => { const fetchBoxes = async () => { try { setLoading(true); const response = await fetch('https://lokat.fly.dev/api/boxes'); if (!response.ok) { throw new Error(`API error: ${response.status}`); } const data = await response.json(); // Map API response to UI format const mappedBoxes = data.map(box => ({ id: box.id, name: box.name, location: box.address.split(',')[0], // Extract first part of address address: box.address, price: box.price_per_slot, rating: 4.5 + Math.random() * 0.4, // Placeholder: 4.5-4.9 reviews: Math.floor(50 + Math.random() * 200), // Placeholder: 50-250 available: box.status === 'open', equip: ['PC Clínico', 'Lavamanos', 'Climatización'], // Placeholder tags: [box.specialty], resolution_type: box.resolution_type || null, images: Array.isArray(box.images) ? box.images : [], img: null, owner: box.owner_id, arrival_instructions: box.arrival_instructions || null, description: box.description || null, })); setBoxes(mappedBoxes); setError(null); } catch (err) { console.error('Error fetching boxes:', err); setError(err.message); setBoxes([]); } finally { setLoading(false); } }; fetchBoxes(); }, []); // ── Detail view + map-highlight state ──────────────────────────────────── // ⚠️ All hooks must appear before the early returns below const [highlightedIds, setHighlightedIds] = React.useState([]); const [detailBox, setDetailBox] = React.useState(null); const cardRefsMap = React.useRef({}); // Called by BoxMap when a marker is clicked — highlights matching cards const handleHighlight = React.useCallback((ids) => { setHighlightedIds(ids); }, []); // Scroll the first highlighted card into view inside the left panel React.useEffect(() => { if (highlightedIds.length > 0) { const el = cardRefsMap.current[highlightedIds[0]]; if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } }, [highlightedIds]); // Lock body scroll in desktop map mode so the split layout truly fills the viewport // ⚠️ Must be BEFORE any early returns so hooks are always called in the same order React.useEffect(() => { if (mapView && !isMobile) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [mapView, isMobile]); // When filters change while map is open, geocode any newly-visible boxes // geocodeBoxes caches by id so already-geocoded boxes are skipped instantly React.useEffect(() => { if (!mapView) return; const notYet = filtered.filter(b => !geocodedIds.current.has(b.id)); if (notYet.length > 0) geocodeBoxes(notYet); }, [filtered, mapView, geocodeBoxes]); const filtered = boxes.filter(b => { if (filter !== 'Todos' && !b.tags.includes(filter)) return false; if (filterResolution !== 'Todas' && b.resolution_type !== filterResolution) return false; if (search && !b.name.toLowerCase().includes(search.toLowerCase()) && !b.location.toLowerCase().includes(search.toLowerCase())) return false; return true; }).sort((a, b) => sortBy === 'precio' ? a.price - b.price : b.rating - a.rating); // In map mode, float highlighted boxes to the top of the left panel const sortedPanel = highlightedIds.length === 0 ? filtered : [...filtered.filter(b => highlightedIds.includes(b.id)), ...filtered.filter(b => !highlightedIds.includes(b.id))]; // Only show map markers for boxes that match the current filters const filteredGeocoded = geocoded.filter(g => filtered.some(b => b.id === g.box.id)); // Loading state if (loading) { return (
{isLoggedIn && ( <> )}
Cargando boxes...
Conectando con el servidor
); } // Error state if (error) { return (
Error al cargar
{isLoggedIn && ( <> )}
⚠️
No se pudieron cargar los boxes
{error}
); } // Normal render with fetched boxes const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onBack(); }; console.log('[LOKAT] SearchResults render — detailBox:', detailBox ? detailBox.id : null, '| mapView:', mapView); return (
{/* PROFESSIONAL HEADER */} {/* SEARCH & SORT BAR */}
setSearch(e.target.value)} /> {isLoggedIn && ( )}
{/* FILTER PILLS — Specialty */}
{filters.map(f => ( ))}
{/* FILTER PILLS — Resolución sanitaria */}
{resolutionFilters.map(f => ( ))}
{/* RESULTS COUNT — list mode only */} {!mapView && (
{filtered.length} boxes encontrados
)} {/* SPLIT MAP VIEW — Airbnb style: list 40% left + map 60% right */} {mapView && (
{/* Left panel: scrollable card list (hidden on mobile) */} {!isMobile && (
{filtered.length} boxes {geocoding ? 📍 Geocodificando… : {filteredGeocoded.length} en el mapa}
{sortedPanel.map(box => { const isHighlighted = highlightedIds.includes(box.id); return (
{ cardRefsMap.current[box.id] = el; }} onClick={() => setDetailBox(box)} style={{borderRadius:12, cursor:'pointer', outline: isHighlighted ? '2.5px solid #0984e3' : 'none', boxShadow: isHighlighted ? '0 4px 20px rgba(9,132,227,0.18)' : 'none', transition:'outline 0.15s, box-shadow 0.15s'}} >
); })}
)} {/* Right panel: map */}
{!leafletReady ? (
Cargando mapa…
) : ( )}
)} {/* LIST VIEW */} {!mapView && (
{filtered.map(box => (
{ console.log('[LOKAT] card clicked, id:', box.id); setDetailBox(box); }} style={{cursor:'pointer'}}> setDetailBox(box)} />
))}
)}
{/* BOX DETAIL MODAL — rendered as a sibling outside pfStyles.page so position:fixed is never clipped by the page's overflowX:hidden. Works in both list mode and map mode. */} {detailBox && ( setDetailBox(null)} onBook={(b) => { setDetailBox(null); onSelect(b); }} /> )} ); }; // ─── QUICK-BOOK CARD ───────────────────────────────────────────────────────── const RESOLUTION_BADGE_STYLE = { 'Solo consulta': { background: '#e3f0fc', color: '#0984e3' }, 'Procedimientos invasivos': { background: '#fff3cd', color: '#856404' }, 'Dental/Radiología': { background: '#f3e8ff', color: '#6f42c1' }, 'Sin resolución sanitaria': { background: '#f8f9fa', color: '#636e72' }, }; const QuickBookCard = ({ box, onSelect }) => { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} > {/* COVER PHOTO */}
{box.images && box.images.length > 0 ? ( {box.name} ) : (
foto del box
)}
{box.available ? '● Disponible hoy' : '● No disponible'}
{box.images && box.images.length > 1 && (
+{box.images.length - 1} fotos
)}
{box.name}
{box.location} · {box.address}
${box.price.toLocaleString()}
/hora
{/* EQUIPMENT ICONS */}
{box.equip.map(e => ( {EQUIP_ICONS[e] || '🔧'} {e} ))}
{/* RESOLUTION BADGE */} {box.resolution_type && (
🏥 {box.resolution_type}
)} {/* RATING + BOOK */}
{(() => { const rounded = Math.round(box.rating * 2) / 2; // nearest 0.5 return [1, 2, 3, 4, 5].map(i => ( {i <= rounded ? '★' : '☆'} )); })()} {Number(box.rating).toFixed(1)} ({box.reviews} reseñas)
); }; // ─── BOX DETAIL MODAL (floating centered overlay) ──────────────────────────── const BoxDetailModal = ({ box, onClose, onBook }) => { const [imgIdx, setImgIdx] = React.useState(0); const [lightbox, setLightbox] = React.useState(false); console.log('BoxDetailModal box:', JSON.stringify(box)); const hasImages = box.images && box.images.length > 0; const rounded = Math.round((box.rating || 0) * 2) / 2; const available = box.available !== false; return ( {/* ── Fullscreen lightbox ── */} {lightbox && hasImages && (
setLightbox(false)} style={{position:'fixed', inset:0, zIndex:1600, background:'rgba(0,0,0,0.92)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'zoom-out'}} > {box.name} e.stopPropagation()} style={{maxWidth:'94vw', maxHeight:'90vh', objectFit:'contain', borderRadius:8, boxShadow:'0 8px 40px rgba(0,0,0,0.6)', cursor:'default'}} /> {box.images.length > 1 && ( <>
{imgIdx + 1} / {box.images.length}
)}
)} {/* ── Modal backdrop ── */}
{ if (e.target === e.currentTarget) onClose(); }} style={{position:'fixed', inset:0, zIndex:1500, background:'rgba(0,0,0,0.48)', display:'flex', alignItems:'center', justifyContent:'center', padding:'20px', fontFamily:"'Helvetica Neue',Helvetica,Arial,sans-serif"}} > {/* Floating card */}
{/* × close button over photo */} {/* Photo carousel */}
{hasImages ? ( <> {/* Clickable image → opens lightbox */} {box.name} setLightbox(true)} style={{width:'100%', height:'100%', objectFit:'cover', display:'block', cursor:'zoom-in'}} /> {/* Always-visible counter */} {box.images.length > 1 && (
{imgIdx + 1} / {box.images.length}
)} {/* Carousel arrows — shown whenever there are multiple images */} {box.images.length > 1 && (
)} ) : (
sin fotos
)}
{available ? '● Disponible hoy' : '● No disponible'}
{/* Scrollable content */}
{/* Name + price */}
{box.name}
{box.address}
${(box.price || 0).toLocaleString('es-CL')}
/hora
{/* Description */} {box.description && (
{box.description}
)} {/* Tags */}
{box.tags?.map(t => ( {t} ))} {box.resolution_type && ( 🏥 {box.resolution_type} )}
{/* Rating */}
{[1,2,3,4,5].map(i => ( {i <= rounded ? '★' : '☆'} ))}
{Number(box.rating || 0).toFixed(1)} ({box.reviews || 0} reseñas)
{/* Equipment */} {box.equip && box.equip.length > 0 && (
Equipamiento incluido
{box.equip.map(e => ( {EQUIP_ICONS[e] || '🔧'} {e} ))}
)} {/* Arrival instructions — API always sends arrival_instructions (snake_case) */} {box.arrival_instructions && (
📍 Indicaciones de llegada
{box.arrival_instructions}
)}
{/* Bottom action bar */}
${(box.price || 0).toLocaleString('es-CL')}
/hora
 ); }; // ─── BOX DETAIL VIEW ───────────────────────────────────────────────────────── const BoxDetail = ({ box, onBack, onBook }) => { const [imgIdx, setImgIdx] = React.useState(0); const hasImages = box.images && box.images.length > 0; const rounded = Math.round((box.rating || 0) * 2) / 2; const available = box.available !== false; return (
{/* ── Sticky header ── */}
{box.name}
{/* ── Photo gallery ── */}
{hasImages ? ( <> {box.name} {box.images.length > 1 && ( <>
{imgIdx + 1} / {box.images.length}
)} ) : (
sin fotos
)} {/* Availability badge overlaid on photo */}
{available ? '● Disponible hoy' : '● No disponible'}
{/* ── Content ── */}
{/* Title + price */}

{box.name}

{box.address}
${(box.price || 0).toLocaleString('es-CL')}
/hora
{/* Specialty + resolution tags */}
{box.tags?.map(t => ( {t} ))} {box.resolution_type && ( 🏥 {box.resolution_type} )}
{/* Divider + rating */}
{[1,2,3,4,5].map(i => ( {i <= rounded ? '★' : '☆'} ))}
{Number(box.rating || 0).toFixed(1)} ({box.reviews || 0} reseñas)
{/* Equipment */} {box.equip && box.equip.length > 0 && (
Equipamiento incluido
{box.equip.map(e => ( {EQUIP_ICONS[e] || '🔧'} {e} ))}
)} {/* Location */}
{box.location || box.address.split(',')[0]}
{box.address}
{/* ── Fixed bottom bar ── */}
${(box.price || 0).toLocaleString('es-CL')}
/hora
); }; // ─── SIS VERIFICATION ──────────────────────────────────────────────────────── const SISVerification = ({ box, onVerified, onBack }) => { const [rut, setRut] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | validating | success | error const [specialty, setSpecialty] = React.useState(''); const specialties = ['Odontología', 'Kinesiología', 'Psicología', 'Medicina General', 'Dermatología', 'Nutrición']; const formatRut = (val) => { const clean = val.replace(/[^0-9kK]/g, ''); if (clean.length <= 1) return clean; const body = clean.slice(0, -1).replace(/\B(?=(\d{3})+(?!\d))/g, '.'); const dv = clean.slice(-1).toUpperCase(); return `${body}-${dv}`; }; const handleRutChange = (e) => { setRut(formatRut(e.target.value)); setStatus('idle'); }; const validate = () => { if (!rut || rut.length < 9 || !specialty) return; setStatus('validating'); setTimeout(() => setStatus('success'), 2200); }; return (
Verificación SIS
Paso 2/3
{/* BOX SUMMARY */}
🏥
{box.name}
{box.location} · ${box.price.toLocaleString()}/hr
Verificación SIS
Superintendencia de Salud

Verificamos tu habilitación profesional en tiempo real con el registro de la Superintendencia de Salud de Chile.

{/* STATUS DISPLAY */} {status === 'idle' && ( )} {status === 'validating' && (
Validando con Superintendencia de Salud...
Consultando registro RUT {rut}
)} {status === 'success' && (
✓
¡Verificado exitosamente!
Habilitado para {specialty} · SIS #2026-{rut.slice(-4)}
)} {status === 'success' && ( )}
); }; // ─── LIGHTBOX (PHOTO VIEWER) ───────────────────────────────────────────────── const Lightbox = ({ images, index, onClose, onNext, onPrev }) => { React.useEffect(() => { const handle = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowRight') onNext(); if (e.key === 'ArrowLeft') onPrev(); }; window.addEventListener('keydown', handle); return () => window.removeEventListener('keydown', handle); }, [index, images.length]); const hasMany = images.length > 1; return (
{/* Close button */} {/* Counter */} {hasMany && (
{index + 1} / {images.length}
)} {/* Prev arrow */} {hasMany && ( )} {/* Image */} {`foto e.stopPropagation()} /> {/* Next arrow */} {hasMany && ( )}
); }; // ─── TIME SLOT GRID ────────────────────────────────────────────────────────── const TimeSlotGrid = ({ box, onBooked, onBack }) => { const [selectedDate, setSelectedDate] = React.useState(0); const [selectedSlot, setSelectedSlot] = React.useState(null); const [confirming, setConfirming] = React.useState(false); const [lightbox, setLightbox] = React.useState(null); const isMobile = useWindowWidth() <= 768; // Recurrence state const [recurrenceEnabled, setRecurrenceEnabled] = React.useState(false); const [recurrenceType, setRecurrenceType] = React.useState('weekly'); // 'weekly' | 'biweekly' const [recurrenceEndDate, setRecurrenceEndDate] = React.useState(''); // Real availability from backend const [takenSlots, setTakenSlots] = React.useState(new Set()); const [slotsLoading, setSlotsLoading] = React.useState(false); // Dental warning: professional is odontólogo but box lacks Dental/Radiología authorization const userSpecialty = (() => { try { return JSON.parse(localStorage.getItem('lokat_user') || '{}').specialty || ''; } catch { return ''; } })(); const showDentalWarning = userSpecialty === 'Odontología' && box.resolution_type !== 'Dental/Radiología'; const today = new Date(); const dates = Array.from({length: 7}, (_, i) => { const d = new Date(today); d.setDate(today.getDate() + i); return d; }); const dayNames = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb']; const monthNames = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic']; const hours = [8,9,10,11,12,13,14,15,16,17,18,19]; // Fetch real taken slots whenever the selected date changes const fetchTakenSlots = React.useCallback(async (dateIndex) => { if (!box?.id) return; setSlotsLoading(true); try { const dateStr = dates[dateIndex].toISOString().split('T')[0]; const response = await fetchWithAuth( `https://lokat.fly.dev/api/bookings/slots?boxId=${encodeURIComponent(box.id)}&date=${dateStr}`, {} ); if (!response.ok) { console.warn('[SLOTS] fetch failed:', response.status); return; } const data = await response.json(); setTakenSlots(new Set(data.takenSlots || [])); console.log(`[SLOTS] ${dateStr}: taken = [${(data.takenSlots || []).join(', ')}]`); } catch (err) { if (err.sessionExpired) return; console.error('[SLOTS] Error fetching slots:', err.message); } finally { setSlotsLoading(false); } }, [box?.id]); // Fetch on mount and whenever selected date changes React.useEffect(() => { fetchTakenSlots(selectedDate); }, [selectedDate, fetchTakenSlots]); const getSlotState = (hour) => { if (takenSlots.has(hour)) return 'taken'; if (takenSlots.has(hour - 1)) return 'buffer'; // hygiene buffer after a taken slot return 'free'; }; // ── Recurrence helpers ──────────────────────────────────────────────────────── const getRecurrenceDates = () => { if (!recurrenceEnabled || !recurrenceEndDate) return [dates[selectedDate]]; const intervalDays = recurrenceType === 'weekly' ? 7 : 14; const end = new Date(recurrenceEndDate); const result = []; const cur = new Date(dates[selectedDate]); while (cur <= end) { result.push(new Date(cur)); cur.setDate(cur.getDate() + intervalDays); } return result; }; const recurrenceDates = selectedSlot !== null ? getRecurrenceDates() : []; const sessionCount = recurrenceDates.length; const pricePerSession = Math.round(box.price * 1.1); const totalAllSessions = pricePerSession * sessionCount; // Min end date = start date + 1 interval const minEndDate = (() => { const d = new Date(dates[selectedDate]); d.setDate(d.getDate() + (recurrenceType === 'weekly' ? 7 : 14)); return d.toISOString().split('T')[0]; })(); // When recurrence type changes, clear end date if it's now before the new minimum const handleRecurrenceTypeChange = (type) => { setRecurrenceType(type); if (recurrenceEndDate) { const newMin = new Date(dates[selectedDate]); newMin.setDate(newMin.getDate() + (type === 'weekly' ? 7 : 14)); if (new Date(recurrenceEndDate) < newMin) setRecurrenceEndDate(''); } }; const handleConfirm = async () => { setConfirming(true); try { const token = localStorage.getItem('lokat_token'); if (!token) { alert('No se encontró token de autenticación. Por favor, inicia sesión nuevamente.'); setConfirming(false); return; } const dateStr = dates[selectedDate].toISOString().split('T')[0]; const bodyPayload = { boxId: box.id, date: dateStr, slot: selectedSlot, total_amount: pricePerSession, }; if (recurrenceEnabled && recurrenceEndDate && sessionCount > 1) { bodyPayload.recurrence = { type: recurrenceType, endDate: recurrenceEndDate }; } const response = await fetchWithAuth('https://lokat.fly.dev/api/bookings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(bodyPayload), }); if (response.status === 409) { const error = await response.json(); console.warn('[BOOKING] Slot conflict:', error); // Refresh slot availability so the UI reflects the real state await fetchTakenSlots(selectedDate); setSelectedSlot(null); setConfirming(false); alert(error.error || 'Este horario ya fue reservado. Por favor selecciona otro.'); return; } if (!response.ok) { const error = await response.json(); console.error('Booking API error response:', error); throw new Error(error.error || error.message || `Error: ${response.status}`); } const data = await response.json(); console.log('Booking created successfully:', data); // Handle single and recurring responses const firstBooking = data.booking || data.bookings?.[0]; onBooked({ box, date: dates[selectedDate], slot: selectedSlot, booking_id: firstBooking.id, booking_code: firstBooking.booking_code, total_amount: data.bookings ? totalAllSessions : pricePerSession, recurring_count: data.bookings?.length || 1, }); } catch (err) { if (err.sessionExpired) return; console.error('Error creating booking:', { message: err.message, stack: err.stack, response: err.response, }); alert(`Error al crear la reserva: ${err.message}`); setConfirming(false); } }; const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onBack(); }; return (
{lightbox && ( setLightbox(null)} onNext={() => setLightbox(p => ({ ...p, index: (p.index + 1) % p.images.length }))} onPrev={() => setLightbox(p => ({ ...p, index: (p.index - 1 + p.images.length) % p.images.length }))} /> )}
{/* BOX MINI HEADER */}
🏥
{box.name}
{box.location} · ${box.price.toLocaleString()}/hr
{/* PHOTO GALLERY */} {box.images && box.images.length > 0 && (
{box.images.map((url, i) => ( {`${box.name} setLightbox({ images: box.images, index: i })} style={{height:120, minWidth:160, objectFit:'cover', borderRadius:10, border:'1px solid #e9ecef', flexShrink:0, cursor:'pointer'}} /> ))}
)} {/* DENTAL WARNING */} {showDentalWarning && (
⚠️
Este box no está habilitado para procedimientos dentales (sin autorización para rayos y autoclave). Verifica con el propietario antes de reservar.
)} {/* DATE STRIP */}
{dates.map((d, i) => ( ))}
{/* LEGEND */}
Buffer higiene Ocupado Disponible
{/* SLOT GRID */}
{slotsLoading && (
)}
{hours.map(hour => { const state = getSlotState(hour); const isSelected = selectedSlot === hour; const slotStyle = { ...pfStyles.slotCell, ...(state === 'taken' ? pfStyles.slotTaken : {}), ...(state === 'buffer' ? pfStyles.slotBuffer : {}), ...(state === 'free' && !isSelected ? pfStyles.slotFree : {}), ...(isSelected ? pfStyles.slotSelected : {}), ...(slotsLoading ? { opacity: 0.4, pointerEvents: 'none' } : {}), }; return (
state === 'free' && !slotsLoading && setSelectedSlot(hour)}>
{hour.toString().padStart(2,'0')}:00
{state === 'buffer' &&
buffer
} {state === 'taken' &&
Ocupado
} {state === 'free' &&
60 min
} {isSelected &&
✓ selec.
}
); })}
{/* end position:relative wrapper */} {/* BOOKING FOOTER */} {selectedSlot !== null && (
{/* COST BREAKDOWN */}
1 hora ({fmtSlot(selectedSlot)}) ${box.price.toLocaleString()}
Comisión plataforma (10%) ${Math.round(box.price * 0.1).toLocaleString()}
{recurrenceEnabled && sessionCount > 1 ? ( <>
Por sesión ${pricePerSession.toLocaleString()}
{sessionCount} sesiones recurrentes × {sessionCount}
Total ({sessionCount} sesiones) ${totalAllSessions.toLocaleString()}
) : (
Total ${pricePerSession.toLocaleString()}
)}
{/* RECURRENCE PANEL */}
{/* Header row with toggle */}
🔁 Reserva recurrente
Repite esta reserva automáticamente
{/* Toggle switch */}
{ setRecurrenceEnabled(e => !e); if (recurrenceEnabled) setRecurrenceEndDate(''); }} >
{recurrenceEnabled && (
{/* Frequency buttons */}
Frecuencia
{[['weekly','Semanal'],['biweekly','Quincenal']].map(([val, label]) => ( ))}
{/* End date */}
Fecha de término
setRecurrenceEndDate(e.target.value)} style={{ width:'100%', padding:'10px 12px', border: recurrenceEndDate ? '1.5px solid #0984e3' : '1.5px solid #dee2e6', borderRadius:8, fontSize:14, color:'#2D3436', background:'#fff', boxSizing:'border-box', outline:'none', }} /> {/* Session preview */} {recurrenceEndDate && sessionCount > 0 && (
📅 {sessionCount} sesión{sessionCount !== 1 ? 'es' : ''} · {recurrenceType === 'weekly' ? 'cada 7 días' : 'cada 14 días'} · ${totalAllSessions.toLocaleString()} total
)}
)}
{showDentalWarning && (
⚠️ Box sin autorización dental — sin rayos ni autoclave. Confirmas de todas formas bajo tu responsabilidad.
)}
)}
); }; // ─── CONFIRMATION / PAYMENT ─────────────────────────────────────────────────── const BookingConfirmation = ({ booking, onHome, onMisReservas }) => { const d = booking.date; const dayNames = ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado']; const monthNames = ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre']; // paymentStep: 'loading' | 'paying' | 'paid' | 'error' const [paymentStep, setPaymentStep] = React.useState('loading'); const [payError, setPayError] = React.useState(''); const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onHome(); }; // Load the Klap Checkout Flex script (idempotent) const loadKlapScript = () => new Promise((resolve, reject) => { if (window.KLAP_FLEX) { resolve(); return; } const existing = document.getElementById('klap-flex-script'); if (existing) { existing.addEventListener('load', resolve); existing.addEventListener('error', reject); return; } const s = document.createElement('script'); s.id = 'klap-flex-script'; s.src = 'https://sandbox.mcdesaqa.cl/pagos/checkout-flex/v1/main.min.js'; s.onload = resolve; s.onerror = () => reject(new Error('No se pudo cargar la pasarela de pago')); document.head.appendChild(s); }); // Initialise payment on mount React.useEffect(() => { let cancelled = false; const initPayment = async () => { try { const user = JSON.parse(localStorage.getItem('lokat_user') || '{}'); // 1 — create Klap order in backend const res = await fetchWithAuth('https://lokat.fly.dev/api/payments/create-order', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.booking_id, amount: booking.total_amount, userEmail: user.email, userName: user.fullName || user.full_name || user.email, }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Error al crear orden de pago'); const { orderId } = data; // 2 — load Klap Checkout Flex script await loadKlapScript(); if (cancelled) return; // 3 — mount payment form inside #klap-checkout-container setPaymentStep('paying'); // Small tick so the container div is in the DOM setTimeout(() => { if (cancelled) return; window.KLAP_FLEX.init({ orderId, containerId: 'klap-checkout-container', onSuccess: () => { if (!cancelled) setPaymentStep('paid'); }, onError: (err) => { if (!cancelled) { setPayError((err && err.message) ? err.message : 'El pago no pudo completarse'); setPaymentStep('error'); } }, }); }, 50); } catch (err) { if (err.sessionExpired) return; if (!cancelled) { setPayError(err.message); setPaymentStep('error'); } } }; initPayment(); return () => { cancelled = true; }; }, []); // ── PAID — success screen ───────────────────────────────────────────────── if (paymentStep === 'paid') return (
✓

¡Pago exitoso!

Tu reserva está confirmada. Recibirás un email en breve.

Box{booking.box.name}
Dirección{booking.box.address}
Fecha{dayNames[d.getDay()]} {d.getDate()} de {monthNames[d.getMonth()]}
Horario{fmtSlot(booking.slot)}
Total pagado${(booking.total_amount || Math.round(booking.box.price * 1.1)).toLocaleString()}
Código{booking.booking_code || '—'}
{booking.box.arrival_instructions && (
📍 Indicaciones de llegada
{booking.box.arrival_instructions}
)}
{onMisReservas && ( )}
); // ── ERROR ───────────────────────────────────────────────────────────────── if (paymentStep === 'error') return (
❌

Error en el pago

{payError || 'El pago no pudo completarse.'}

Tu reserva existe pero está pendiente de pago. Puedes intentarlo nuevamente.

); // ── LOADING + PAYING — Klap form mounts here ───────────────────────────── return (
{/* TEST MODE BANNER */} {TEST_MODE && (
🧪 Modo de prueba activo — los pagos no son reales
)}
{/* Booking summary */}
Resumen de tu reserva
Box{booking.box.name}
Fecha{dayNames[d.getDay()]} {d.getDate()} de {monthNames[d.getMonth()]}
Horario{fmtSlot(booking.slot)}
{booking.recurring_count > 1 && (
Sesiones{booking.recurring_count} reservas recurrentes
)}
Total ${booking.total_amount.toLocaleString()}
{/* TEST MODE — simulate success button */} {TEST_MODE && (
🧪 Entorno de prueba
No se procesará ningún pago real
)} {/* Klap container — shown when paymentStep is 'paying' */} {paymentStep === 'paying' && (
)} {/* Loading spinner while creating order + fetching script */} {paymentStep === 'loading' && !TEST_MODE && (
Preparando pasarela de pago...
)}
); }; // ─── MIS RESERVAS ───────────────────────────────────────────────────────────── const MisReservas = ({ onBack, onCancelar, onCalificar }) => { console.log('✅ MisReservas component mounted'); const [reservas, setReservas] = React.useState([]); const [loading, setLoading] = React.useState(true); const isMobile = useWindowWidth() <= 768; const [error, setError] = React.useState(null); const [searchBox, setSearchBox] = React.useState(''); const [filterStatus, setFilterStatus] = React.useState('todas'); const [filterSpecialty, setFilterSpecialty] = React.useState('todas'); const [filterResolutionMR, setFilterResolutionMR] = React.useState('todas'); const [filterFromDate, setFilterFromDate] = React.useState(''); const [filterToDate, setFilterToDate] = React.useState(''); const [filterSlot, setFilterSlot] = React.useState('todos'); const fetchReservas = async () => { try { setLoading(true); console.log('📡 Fetching from: https://lokat.fly.dev/api/bookings/my'); const response = await fetchWithAuth('https://lokat.fly.dev/api/bookings/my', {}); console.log('📥 API Response status:', response.status); if (!response.ok) { const err = await response.json(); console.error('❌ API error response:', err); throw new Error(err.error || `Error: ${response.status}`); } const data = await response.json(); console.log('✅ Bookings fetched successfully:', data); console.log(`📊 Total bookings received: ${data.length}`); // Map API response to UI format const mappedReservas = data.map(booking => ({ id: booking.booking_code, // Display booking code (LKT-XXXXX) uuid: booking.id, // Database UUID for API calls box: booking.boxes.name, address: booking.boxes.address, fecha: new Date(booking.date), slot: booking.slot, monto: booking.total_amount, status: booking.status, medico: booking.boxes.specialty || 'Profesional', resolution_type: booking.boxes.resolution_type || null, rating: booking.rating_by_professional, // Rating value if already rated })); console.log('✅ Reservas mapped successfully:', mappedReservas); console.log(`📈 Setting state: reservas array with ${mappedReservas.length} items`); console.log('🔹 Sample mapped reserva:', mappedReservas[0]); setReservas(mappedReservas); console.log('✅ setReservas() called with:', mappedReservas.length, 'items'); setError(null); console.log('✅ setError(null) called'); } catch (err) { if (err.sessionExpired) return; console.error('❌ Error fetching reservas:', { message: err.message, stack: err.stack, }); setError(err.message); setReservas([]); } finally { console.log('✅ Finally block (MisReservas): Setting loading to false'); setLoading(false); } }; React.useEffect(() => { console.log('🔄 MisReservas useEffect: Starting API call to fetch bookings'); fetchReservas(); }, []); const formatFecha = (d) => { const days = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb']; const months = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic']; return `${days[d.getDay()]} ${d.getDate()} ${months[d.getMonth()]} · ${d.getHours().toString().padStart(2,'0')}:00`; }; const statusBadge = (s) => { if (s === 'confirmed') return { label: 'Confirmada', bg: '#d4edda', color: '#155724' }; if (s === 'cancelled') return { label: 'Cancelada', bg: '#f8d7da', color: '#721c24' }; return { label: 'Completada', bg: '#e9ecef', color: '#495057' }; }; // Debug: Log current state before render decision console.log('🔍 RENDER DECISION - Current state:', { loading, error, reservasCount: reservas.length, reservas: reservas, }); // Loading state if (loading) { console.log('🔄 Rendering LOADING state - loading is:', loading); return (
Mis Reservas
Cargando reservas...
Consultando tus bookings
); } // Error state if (error) { console.log('❌ Rendering ERROR state:', error); return (
Error
⚠️
Error al cargar reservas
{error}
); } // Empty state if (reservas.length === 0) { console.log('📭 Rendering EMPTY state (no reservas)'); return (
Mis Reservas
📅
No tienes reservas aún
Busca y reserva un box para comenzar
); } // Normal render with real reservas console.log('✅ Rendering NORMAL state with', reservas.length, 'reservas'); // Calculate KPIs const totalReservas = reservas.length; const gastoTotal = reservas.reduce((sum, r) => sum + r.monto, 0); const proximaReserva = reservas .filter(r => new Date(r.fecha) > new Date()) .sort((a, b) => new Date(a.fecha) - new Date(b.fecha))[0]; // Get unique specialties and time slots for filter options const specialties = ['todas', ...Array.from(new Set(reservas.map(r => r.medico))).sort()]; const timeSlots = ['todos', ...Array.from(new Set(reservas.map(r => r.slot || 'Sin horario'))).sort((a, b) => { if (a === 'Sin horario') return 1; if (b === 'Sin horario') return -1; return a - b; })]; // Apply filters const filteredReservas = reservas.filter(r => { const matchesSearch = r.box.toLowerCase().includes(searchBox.toLowerCase()); const matchesStatus = filterStatus === 'todas' || r.status === filterStatus; const matchesSpecialty = filterSpecialty === 'todas' || r.medico === filterSpecialty; const matchesResolution = filterResolutionMR === 'todas' || r.resolution_type === filterResolutionMR; const matchesSlot = filterSlot === 'todos' || r.slot === parseInt(filterSlot); let matchesDateRange = true; if (filterFromDate) { matchesDateRange = matchesDateRange && r.fecha >= new Date(filterFromDate); } if (filterToDate) { matchesDateRange = matchesDateRange && r.fecha <= new Date(filterToDate); } return matchesSearch && matchesStatus && matchesSpecialty && matchesResolution && matchesDateRange && matchesSlot; }); const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onBack(); }; return (
{/* Summary Bar */}
Total Reservas
{totalReservas}
Total Gastado
${gastoTotal.toLocaleString('es-CL')}
Próxima Reserva
{proximaReserva ? new Date(proximaReserva.fecha).toLocaleDateString('es-CL', {month: 'short', day: 'numeric'}) : '—' }
{/* Filter Bar */}
{/* Search */} setSearchBox(e.target.value)} style={{...mrFilterInput, gridColumn: 'span 1'}} /> {/* Status Filter */} {/* Specialty Filter */} {/* Resolution Type Filter */} {/* Time Slot Filter */} {/* Date Range */} setFilterFromDate(e.target.value)} placeholder="Desde" style={mrFilterInput} /> setFilterToDate(e.target.value)} placeholder="Hasta" style={mrFilterInput} /> {/* Clear Filters Button */}
{/* Results Count */} {filteredReservas.length !== totalReservas && (
Mostrando {filteredReservas.length} de {totalReservas} reservas
)} {/* Grid of Booking Cards */} {filteredReservas.length === 0 ? (
🔍
No se encontraron reservas
Intenta ajustar tus filtros
) : (
{filteredReservas.map(r => { const badge = statusBadge(r.status); const isCancelled = r.status === 'cancelled'; return (
{/* Card Header with Status Badge */}
{r.box}
{r.address}
{badge.label}
{/* Details Grid */}
Especialidad {r.medico}
Fecha {r.fecha.toLocaleDateString('es-CL', {month: 'short', day: 'numeric', year: 'numeric'})}
Hora {r.slot ? fmtSlot(r.slot) : 'Sin horario'}
Monto ${r.monto.toLocaleString()}
Código de Reserva {r.id}
{/* Actions */}
{!isCancelled && ( )} {r.status === 'confirmed' && ( )} {r.status === 'completed' && ( r.rating ? ( ) : ( ) )}
); })}
)}
); }; const mrDetailCell = { display:'flex', flexDirection:'column', gap:2, minWidth:120 }; const mrDetailLabel = { fontSize:11, color:'#adb5bd', fontWeight:500 }; const mrDetailVal = { fontSize:13, fontWeight:600, color:'#2D3436' }; const mrBtn = { background:'#f8f9fa', border:'1px solid #dee2e6', borderRadius:8, padding:'7px 13px', fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:"'Helvetica Neue',Helvetica,Arial,sans-serif", color:'#2D3436' }; const mrSummaryCard = { background:'#fff', borderRadius:12, padding:16, border:'1px solid #e9ecef', textAlign:'center' }; const mrSummaryLabel = { fontSize:12, color:'#636e72', fontWeight:500, marginBottom:8 }; const mrFilterInput = { padding:'10px 12px', border:'1px solid #dee2e6', borderRadius:8, fontSize:13, fontFamily:"'Helvetica Neue',Helvetica,Arial,sans-serif", color:'#2D3436', background:'#fff', outline:'none' }; // ─── CANCELACION FLOW ───────────────────────────────────────────────────────── const CancelacionFlow = ({ reserva, onBack, onCancelled, onBookingCancelled }) => { const [showConfirm, setShowConfirm] = React.useState(false); const [cancelled, setCancelled] = React.useState(false); const now = Date.now(); const msUntil = reserva.fecha.getTime() - now; const hoursUntil = msUntil / (1000 * 60 * 60); let multa = 0, reembolso = reserva.monto, policy = '', policyColor = '#00b894'; if (hoursUntil > 24) { multa = 0; reembolso = reserva.monto; policy = 'Más de 24h de anticipación — sin multa, reembolso total.'; policyColor = '#00b894'; } else if (hoursUntil >= 12) { multa = Math.round(reserva.monto * 0.5); reembolso = reserva.monto - multa; policy = 'Entre 12 y 24h — multa del 50%.'; policyColor = '#f39c12'; } else { multa = reserva.monto; reembolso = 0; policy = 'Menos de 12h — multa del 100%, sin reembolso.'; policyColor = '#e74c3c'; } const hoursDisplay = Math.abs(Math.floor(hoursUntil)); const minutesDisplay = Math.abs(Math.floor((hoursUntil % 1) * 60)); const pct = Math.min(100, Math.max(0, (hoursUntil / 48) * 100)); const handleConfirm = async () => { console.log('🚀🚀🚀 handleConfirm CALLED 🚀🚀🚀'); try { console.log('🔵 CancelacionFlow: Starting cancellation...', { reserva }); const token = localStorage.getItem('lokat_token'); if (!token) { alert('No token found. Please log in again.'); setShowConfirm(false); return; } // Get the booking UUID (database ID) from reserva object const bookingId = reserva.uuid; console.log('🔵 CancelacionFlow: Making DELETE request for bookingId (uuid):', bookingId); const response = await fetchWithAuth(`https://lokat.fly.dev/api/bookings/${bookingId}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, }); console.log('🔵 CancelacionFlow: DELETE response status:', response.status); if (!response.ok) { const errorData = await response.json(); console.error('🔴 CancelacionFlow: DELETE error:', errorData); alert(`Error: ${errorData.error || 'Could not cancel booking'}`); setShowConfirm(false); return; } const data = await response.json(); console.log('🔵 CancelacionFlow: Cancellation successful:', data); setShowConfirm(false); setCancelled(true); // Refetch bookings from parent component to update the list if (onBookingCancelled) { console.log('🔄 CancelacionFlow: Calling onBookingCancelled to refetch bookings'); setTimeout(() => { onBookingCancelled(); }, 1500); // Small delay to show success message before refetch } } catch (error) { if (error.sessionExpired) return; console.error('🔴 CancelacionFlow: Exception:', error); alert(`Error: ${error.message}`); setShowConfirm(false); } }; const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onBack(); }; if (cancelled) { return (
✕

Reserva cancelada

Tu reserva {reserva.id} ha sido cancelada.

Box{reserva.box}
Multa{multa > 0 ? `$${multa.toLocaleString()}` : 'Sin multa'}
Reembolso 0 ? '#00b894' : '#adb5bd'}}> {reembolso > 0 ? `$${reembolso.toLocaleString()}` : 'Sin reembolso'}
{reembolso > 0 &&

El reembolso se acreditará en 3–5 días hábiles.

}
); } return (
{/* Reservation summary */}
{reserva.box}
{reserva.address}
Código: {reserva.id} {' · '}Monto: ${reserva.monto.toLocaleString()}
{/* Time bar */}
Tiempo hasta la reserva {hoursUntil > 0 ? `${hoursDisplay}h ${minutesDisplay}m` : 'Ya pasó'}
{policy}
{/* Cost breakdown */}
Resumen económico
Monto pagado ${reserva.monto.toLocaleString()}
Multa por cancelación 0 ? '#e74c3c' : '#adb5bd'}}>{multa > 0 ? `-$${multa.toLocaleString()}` : '$0'}
Reembolso 0 ? '#00b894' : '#e74c3c', fontSize:18}}> {reembolso > 0 ? `$${reembolso.toLocaleString()}` : '$0'}
{/* Cancel button */}

Esta acción no se puede deshacer.

{/* Confirmation modal */} {showConfirm && (
¿Estás seguro?

Esta acción no se puede deshacer.{reembolso > 0 ? ` Recibirás un reembolso de $${reembolso.toLocaleString()}.` : ' No recibirás reembolso.'}

)}
); }; // ─── RATING FLOW ────────────────────────────────────────────────────────────── const RatingFlow = ({ userType, reserva, onBack, onDone }) => { const [ratings, setRatings] = React.useState({ punctuality: 5, cleanliness: 5, equipment: 5, communication: 5, }); const [comment, setComment] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const [loading, setLoading] = React.useState(false); const criterios = [ { key: 'punctuality', label: 'Puntualidad', description: 'Llegada y atención a tiempo' }, { key: 'cleanliness', label: 'Limpieza', description: 'Estado de limpieza del espacio' }, { key: 'equipment', label: 'Equipamiento', description: 'Calidad y disponibilidad de equipos' }, { key: 'communication', label: 'Comunicación', description: 'Claridad en la comunicación' }, ]; const averageScore = Math.round( Object.values(ratings).reduce((a, b) => a + b, 0) / Object.keys(ratings).length ); const handleSubmit = async () => { try { console.log('🌟 RatingFlow: Submitting rating...', { userType, reserva, ratings, averageScore }); const token = localStorage.getItem('lokat_token'); if (!token) { alert('No token found. Please log in again.'); return; } setLoading(true); // Determine the field name based on userType const ratingField = userType === 'professional' ? 'rating_by_professional' : 'rating_by_owner'; const updateData = { [ratingField]: averageScore }; // Add comment if provided if (comment.trim()) { updateData.rating_comment = comment.trim(); } console.log('🌟 RatingFlow: Making PATCH request with:', updateData); const response = await fetchWithAuth(`https://lokat.fly.dev/api/bookings/${reserva.uuid}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(updateData), }); console.log('🌟 RatingFlow: PATCH response status:', response.status); if (!response.ok) { const errorData = await response.json(); console.error('🔴 RatingFlow: PATCH error:', errorData); alert(`Error: ${errorData.error || 'Could not submit rating'}`); return; } const data = await response.json(); console.log('🌟 RatingFlow: Rating submitted successfully:', data); setSubmitted(true); } catch (error) { if (error.sessionExpired) return; console.error('🔴 RatingFlow: Exception:', error); alert(`Error: ${error.message}`); } finally { setLoading(false); } }; const handleLogout = () => { localStorage.removeItem('lokat_token'); localStorage.removeItem('lokat_user'); onBack(); }; if (submitted) { return (
✓

Gracias por tu valoración

Tu evaluación ha sido registrada exitosamente.

Box{reserva.box}
Puntuación★★★★★ ({averageScore}/5)
); } return (
{/* Reservation info */}
{reserva.box}
{reserva.address}
Código: {reserva.id}
{/* Rating criteria */}
¿Cómo fue tu experiencia?
{criterios.map(criterio => (
{criterio.label}
{criterio.description}
{ratings[criterio.key]}
setRatings({...ratings, [criterio.key]: parseInt(e.target.value)})} style={{width:'100%', cursor:'pointer'}} />
Muy malo Excelente
))}
{/* Average score */}
Puntuación promedio
★ {averageScore}/5
{/* Comments section */}
Comentario (opcional)