mapa
This commit is contained in:
334
temp_script.jsx
334
temp_script.jsx
@@ -5,7 +5,7 @@
|
||||
TrendingUp, TrendingDown, CheckCircle, AlertCircle, Clock, LogOut,
|
||||
Edit2, Trash2, Save, Filter, MoreVertical, FileText,
|
||||
Dumbbell, PartyPopper, Trophy, Map, Calendar, MapPin, Info,
|
||||
MessageCircle, Paperclip, Send
|
||||
MessageCircle, Paperclip, Send, Store, HeartPulse, Waves, ShoppingCart, Navigation, Car
|
||||
} from 'lucide-react';
|
||||
|
||||
import { app } from './firebase.js';
|
||||
@@ -539,6 +539,30 @@
|
||||
|
||||
return () => unsub();
|
||||
}, [activeChat, currentUserId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (userRole === 'admin' && residents.length > 0 && faturas.length > 0) {
|
||||
let hasUpdates = false;
|
||||
const updates = {};
|
||||
|
||||
residents.forEach((resident) => {
|
||||
const residentFaturas = faturas.filter(f => f.moradorId === resident.id && f.status !== 'Pago');
|
||||
const actualPending = residentFaturas.reduce((acc, f) => acc + Number(f.valor), 0);
|
||||
const actualStatus = actualPending > 0 ? 'Pendente' : 'Pago';
|
||||
|
||||
if (Number(resident.pending) !== actualPending || resident.status !== actualStatus) {
|
||||
updates[`condominos/${resident.id}/pending`] = actualPending;
|
||||
updates[`condominos/${resident.id}/status`] = actualStatus;
|
||||
hasUpdates = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (hasUpdates) {
|
||||
update(ref(db), updates).catch(err => console.error("Erro na sincronização:", err));
|
||||
}
|
||||
}
|
||||
}, [faturas, residents, userRole]);
|
||||
|
||||
const [notificationsList, setNotificationsList] = useState([]);
|
||||
const [isNotificationsOpen, setNotificationsOpen] = useState(false);
|
||||
|
||||
@@ -814,7 +838,10 @@
|
||||
});
|
||||
|
||||
const newPending = (Number(morador.pending) || 0) + valor;
|
||||
await set(ref(db, `condominos/${morador.id}/pending`), newPending);
|
||||
await update(ref(db, `condominos/${morador.id}`), {
|
||||
pending: newPending,
|
||||
status: 'Pendente'
|
||||
});
|
||||
|
||||
sendSystemNotification(`Foi emitida uma nova fatura no valor de ${valor.toFixed(2)}€ (Categoria: ${formData.categoria})`, 'warning', morador.id);
|
||||
sendSystemNotification(`Fatura de ${valor.toFixed(2)}€ emitida para ${morador.name} (${morador.unit})`, 'info', 'admin');
|
||||
@@ -834,8 +861,11 @@
|
||||
const morador = residents.find(r => r.id === fatura.moradorId);
|
||||
if (morador) {
|
||||
let newPending = (Number(morador.pending) || 0) - Number(fatura.valor);
|
||||
if (newPending < 0) newPending = 0;
|
||||
await set(ref(db, `condominos/${morador.id}/pending`), newPending);
|
||||
if (newPending <= 0.01) newPending = 0;
|
||||
await update(ref(db, `condominos/${morador.id}`), {
|
||||
pending: newPending,
|
||||
status: newPending === 0 ? 'Pago' : 'Pendente'
|
||||
});
|
||||
}
|
||||
sendSystemNotification(`O pagamento da sua fatura de ${fatura.categoria} foi concluído!`, 'success', fatura.moradorId);
|
||||
sendSystemNotification(`Pagamento registado para a fatura de ${fatura.categoria} da fração ${morador?.unit || fatura.fracao}.`, 'success', 'admin');
|
||||
@@ -853,8 +883,11 @@
|
||||
const morador = residents.find(r => r.id === fatura.moradorId);
|
||||
if (morador) {
|
||||
let newPending = (Number(morador.pending) || 0) - Number(fatura.valor);
|
||||
if (newPending < 0) newPending = 0;
|
||||
await set(ref(db, `condominos/${morador.id}/pending`), newPending);
|
||||
if (newPending <= 0.01) newPending = 0;
|
||||
await update(ref(db, `condominos/${morador.id}`), {
|
||||
pending: newPending,
|
||||
status: newPending === 0 ? 'Pago' : 'Pendente'
|
||||
});
|
||||
}
|
||||
sendSystemNotification(`O seu pagamento da fatura de ${fatura.categoria} foi aprovado!`, 'success', fatura.moradorId);
|
||||
sendSystemNotification(`Pagamento aprovado para a fatura de ${fatura.categoria} da fração ${morador?.unit || fatura.fracao}.`, 'success', 'admin');
|
||||
@@ -1068,64 +1101,257 @@
|
||||
);
|
||||
};
|
||||
|
||||
const MapView = () => (
|
||||
<div className="bg-white dark:bg-dark-surface rounded-xl shadow-sm border border-slate-100 dark:border-dark-border overflow-hidden animate-fade-in flex flex-col h-full transition-colors">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-dark-border flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-slate-800 dark:text-white">Mapa do Condomínio</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-dark-mute">Plantas e Localizações</p>
|
||||
const MapView = () => {
|
||||
const [activePoint, setActivePoint] = useState(null);
|
||||
const [espacos, setEspacos] = useState([]);
|
||||
const [route, setRoute] = useState(null);
|
||||
const [isLocating, setIsLocating] = useState(false);
|
||||
|
||||
const IconMap = { Building2, ShoppingCart, Store, HeartPulse, Info, MapPin, Trophy, Dumbbell, PartyPopper, Waves };
|
||||
|
||||
useEffect(() => {
|
||||
const defaultEspacos = {
|
||||
'bloco-a': { nome: 'Bloco A', tipo: 'Residencial', descricao: '10 andares • 20 Frações', icone: 'Building2', color: 'text-orange-500', bg: 'bg-orange-100 dark:bg-orange-900/40', border: 'border-orange-300 dark:border-orange-700/50', x: 8, y: 15, w: 20, h: 28, canBook: false, latitude: 38.7225, longitude: -9.1398 },
|
||||
'bloco-b': { nome: 'Bloco B', tipo: 'Residencial', descricao: '8 andares • 16 Frações', icone: 'Building2', color: 'text-orange-500', bg: 'bg-orange-100 dark:bg-orange-900/40', border: 'border-orange-300 dark:border-orange-700/50', x: 8, y: 55, w: 20, h: 28, canBook: false, latitude: 38.7215, longitude: -9.1398 },
|
||||
'mercado-1': { nome: 'Mini Mercado 1', tipo: 'Comércio', descricao: 'Bens de primeira necessidade', icone: 'ShoppingCart', color: 'text-amber-600', bg: 'bg-amber-100 dark:bg-amber-900/40', border: 'border-amber-300 dark:border-amber-700/50', x: 32, y: 20, w: 12, h: 15, canBook: false, latitude: 38.7228, longitude: -9.1390 },
|
||||
'mercado-2': { nome: 'Mini Mercado 2', tipo: 'Comércio', descricao: 'Mercearia e cafetaria', icone: 'Store', color: 'text-amber-600', bg: 'bg-amber-100 dark:bg-amber-900/40', border: 'border-amber-300 dark:border-amber-700/50', x: 32, y: 65, w: 12, h: 15, canBook: false, latitude: 38.7212, longitude: -9.1390 },
|
||||
'medico': { nome: 'Posto Médico', tipo: 'Serviços', descricao: 'Primeiros socorros e saúde', icone: 'HeartPulse', color: 'text-red-600', bg: 'bg-red-100 dark:bg-red-900/40', border: 'border-red-300 dark:border-red-700/50', x: 48, y: 20, w: 12, h: 15, canBook: false, latitude: 38.7228, longitude: -9.1385 },
|
||||
'reception': { nome: 'Recepção', tipo: 'Serviços', descricao: 'Segurança 24h e Encomendas', icone: 'Info', color: 'text-slate-700 dark:text-slate-300', bg: 'bg-slate-200 dark:bg-slate-700', border: 'border-slate-400 dark:border-slate-500', x: 48, y: 45, w: 8, h: 12, isRound: true, canBook: false, latitude: 38.7220, longitude: -9.1385 },
|
||||
'pool': { nome: 'Piscina', tipo: 'Lazer', descricao: 'Piscina exterior aquecida', icone: 'MapPin', color: 'text-teal-600', bg: 'bg-teal-100 dark:bg-teal-900/40', border: 'border-teal-300 dark:border-teal-700/50', x: 48, y: 65, w: 14, h: 18, canBook: false, latitude: 38.7212, longitude: -9.1385 },
|
||||
'park': { nome: 'Parque de Jogos', tipo: 'Lazer', descricao: 'Campo Polidesportivo', icone: 'Trophy', color: 'text-green-600', bg: 'bg-green-100 dark:bg-green-900/40', border: 'border-green-300 dark:border-green-700/50', x: 65, y: 15, w: 18, h: 25, canBook: true, bookId: 'park', latitude: 38.7225, longitude: -9.1375 },
|
||||
'gym': { nome: 'Ginásio', tipo: 'Lazer', descricao: 'Equipamento Cardio e Força', icone: 'Dumbbell', color: 'text-blue-600', bg: 'bg-blue-100 dark:bg-blue-900/40', border: 'border-blue-300 dark:border-blue-700/50', x: 65, y: 48, w: 14, h: 18, canBook: true, bookId: 'gym', latitude: 38.7218, longitude: -9.1375 },
|
||||
'hall': { nome: 'Salão Festas', type: 'Lazer', descricao: 'Capacidade 50 px', icone: 'PartyPopper', color: 'text-purple-600', bg: 'bg-purple-100 dark:bg-purple-900/40', border: 'border-purple-300 dark:border-purple-700/50', x: 65, y: 72, w: 14, h: 18, canBook: true, bookId: 'hall', latitude: 38.7210, longitude: -9.1375 },
|
||||
'deck': { nome: 'Deque do Rio', tipo: 'Lazer', descricao: 'Zona de relaxamento à beira rio', icone: 'Waves', color: 'text-cyan-700 dark:text-cyan-300', bg: 'bg-cyan-100 dark:bg-cyan-900/40', border: 'border-cyan-300 dark:border-cyan-700/50', x: 85, y: 40, w: 8, h: 30, canBook: false, latitude: 38.7220, longitude: -9.1360 },
|
||||
};
|
||||
|
||||
const espacosRef = ref(db, 'espacos');
|
||||
const unsub = onValue(espacosRef, (snapshot) => {
|
||||
if (snapshot.exists()) {
|
||||
const data = snapshot.val();
|
||||
const loadedEspacos = Object.keys(data).map(key => ({ id: key, ...data[key] }));
|
||||
setEspacos(loadedEspacos);
|
||||
} else {
|
||||
// Seed inicial da base de dados se estiver vazia
|
||||
set(ref(db, 'espacos'), defaultEspacos).catch(console.error);
|
||||
}
|
||||
});
|
||||
return () => unsub();
|
||||
}, []);
|
||||
|
||||
const getDistance = (lat1, lon1, lat2, lon2) => {
|
||||
const R = 6371; // Raio da Terra em km
|
||||
const dLat = (lat2 - lat1) * Math.PI / 180;
|
||||
const dLon = (lon2 - lon1) * Math.PI / 180;
|
||||
const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
|
||||
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
||||
Math.sin(dLon/2) * Math.sin(dLon/2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||||
return R * c; // em km
|
||||
};
|
||||
|
||||
const handleRoute = (espaco) => {
|
||||
setIsLocating(true);
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
const userLat = pos.coords.latitude;
|
||||
const userLng = pos.coords.longitude;
|
||||
const distKm = getDistance(userLat, userLng, espaco.latitude, espaco.longitude);
|
||||
|
||||
// Mapeamento da localização GPS do utilizador para as coordenadas visuais (x,y) do mapa
|
||||
const minLat = 38.7205; const maxLat = 38.7230;
|
||||
const minLng = -9.1405; const maxLng = -9.1350;
|
||||
|
||||
let userX = ((userLng - minLng) / (maxLng - minLng)) * 100;
|
||||
let userY = ((maxLat - userLat) / (maxLat - minLat)) * 100;
|
||||
|
||||
// Se estiver fora do condomínio (> 5km), coloca o utilizador na entrada principal
|
||||
if (distKm > 5) {
|
||||
userX = 48; // Receção / Portaria
|
||||
userY = 95; // Entrada
|
||||
} else {
|
||||
userX = Math.max(5, Math.min(95, userX));
|
||||
userY = Math.max(5, Math.min(95, userY));
|
||||
}
|
||||
|
||||
setRoute({
|
||||
active: true,
|
||||
targetId: espaco.id,
|
||||
distance: distKm * 1000,
|
||||
walkTime: Math.max(1, Math.ceil((distKm / 5) * 60)), // 5 km/h a pé
|
||||
driveTime: Math.max(1, Math.ceil((distKm / 30) * 60)), // 30 km/h de carro
|
||||
userX,
|
||||
userY
|
||||
});
|
||||
setIsLocating(false);
|
||||
},
|
||||
(error) => {
|
||||
console.error("Erro de geolocalização:", error);
|
||||
alert("Não foi possível obter a sua localização. Verifique as permissões do browser.");
|
||||
setIsLocating(false);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
alert("Geolocalização não é suportada por este browser.");
|
||||
setIsLocating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-dark-surface rounded-xl shadow-sm border border-slate-100 dark:border-dark-border overflow-hidden animate-fade-in flex flex-col h-full transition-colors">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-dark-border flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-slate-800 dark:text-white">Navegação Inteligente</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-dark-mute">Explore e encontre rotas no condomínio</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 px-2 py-1 rounded">Residencial</span>
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 px-2 py-1 rounded">Comércio</span>
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded">Lazer</span>
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-2 py-1 rounded">Serviços</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded"><div className="w-2 h-2 rounded-full bg-blue-500"></div> Comum</span>
|
||||
<span className="flex items-center gap-1 text-xs font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 px-2 py-1 rounded"><div className="w-2 h-2 rounded-full bg-orange-500"></div> Blocos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6 bg-slate-50 dark:bg-dark-bg overflow-auto flex items-center justify-center">
|
||||
<div className="relative w-[800px] h-[500px] bg-white dark:bg-dark-surface border-2 border-slate-300 dark:border-dark-border rounded-xl shadow-xl p-8 transform hover:scale-[1.01] transition-transform duration-500">
|
||||
<div className="absolute inset-0 opacity-5 bg-[linear-gradient(0deg,transparent_24%,#000_25%,#000_26%,transparent_27%,transparent_74%,#000_75%,#000_76%,transparent_77%,transparent),linear-gradient(90deg,transparent_24%,#000_25%,#000_26%,transparent_27%,transparent_74%,#000_75%,#000_76%,transparent_77%,transparent)] bg-[length:50px_50px]"></div>
|
||||
<div className="flex flex-col lg:flex-row flex-1 min-h-[500px]">
|
||||
{/* Área do Mapa */}
|
||||
<div className="flex-1 p-6 bg-slate-50 dark:bg-dark-bg flex items-center justify-center relative overflow-hidden">
|
||||
<div className="relative w-full max-w-[800px] aspect-[16/10] bg-white dark:bg-dark-surface border-2 border-slate-300 dark:border-dark-border rounded-xl shadow-xl p-4 transition-all duration-500 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-5 bg-[linear-gradient(0deg,transparent_24%,#000_25%,#000_26%,transparent_27%,transparent_74%,#000_75%,#000_76%,transparent_77%,transparent),linear-gradient(90deg,transparent_24%,#000_25%,#000_26%,transparent_27%,transparent_74%,#000_75%,#000_76%,transparent_77%,transparent)] bg-[length:40px_40px]"></div>
|
||||
|
||||
{/* Visual River */}
|
||||
<div className="absolute right-0 top-0 bottom-0 w-[12%] bg-blue-400/20 dark:bg-blue-600/20 border-l-4 border-blue-300/30 dark:border-blue-700/30 flex items-center justify-center overflow-hidden pointer-events-none">
|
||||
<div className="text-blue-500/30 dark:text-blue-400/20 font-bold text-3xl rotate-90 whitespace-nowrap tracking-[1em]">RIO</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/2 left-0 w-full h-16 bg-slate-200 dark:bg-dark-card transform -translate-y-1/2 border-y-2 border-slate-300 dark:border-slate-600 border-dashed flex items-center justify-center text-slate-400 font-bold tracking-[1em] opacity-50">VIA CENTRAL</div>
|
||||
<div className="absolute top-1/2 left-0 w-[88%] h-12 bg-slate-200 dark:bg-dark-card transform -translate-y-1/2 border-y-2 border-slate-300 dark:border-slate-600 border-dashed flex items-center justify-center text-slate-400 font-bold tracking-[0.5em] opacity-40 text-xs sm:text-sm pointer-events-none">VIA CENTRAL</div>
|
||||
|
||||
{/* SVG Route Overlay */}
|
||||
{route && route.targetId && (
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none z-30" style={{ overflow: 'visible' }}>
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6" />
|
||||
</marker>
|
||||
</defs>
|
||||
{espacos.filter(e => e.id === route.targetId).map(target => (
|
||||
<path
|
||||
key="route-path"
|
||||
d={`M ${route.userX}% ${route.userY}% Q 50% 50% ${target.x + (target.w||0)/2}% ${target.y + (target.h||0)/2}%`}
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth="4"
|
||||
strokeDasharray="8, 8"
|
||||
className="animate-[dash_1s_linear_infinite]"
|
||||
markerEnd="url(#arrowhead)"
|
||||
/>
|
||||
))}
|
||||
<circle cx={`${route.userX}%`} cy={`${route.userY}%`} r="6" fill="#3b82f6" className="animate-ping" />
|
||||
<circle cx={`${route.userX}%`} cy={`${route.userY}%`} r="4" fill="#1e40af" />
|
||||
<style>{`
|
||||
@keyframes dash { to { stroke-dashoffset: -16; } }
|
||||
`}</style>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
<div className="absolute top-10 left-10 w-40 h-40 bg-orange-100 dark:bg-orange-900/40 border-2 border-orange-300 dark:border-orange-700/50 rounded-lg flex flex-col items-center justify-center hover:bg-orange-200 dark:hover:bg-orange-900/60 cursor-pointer transition-colors group">
|
||||
<Building2 size={32} className="text-orange-500 mb-2" />
|
||||
<span className="font-bold text-orange-800 dark:text-orange-200">Bloco A</span>
|
||||
<div className="absolute -bottom-8 opacity-0 group-hover:opacity-100 bg-black text-white text-xs px-2 py-1 rounded transition-opacity">10 andares • 20 Frações</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-10 left-10 w-40 h-40 bg-orange-100 dark:bg-orange-900/40 border-2 border-orange-300 dark:border-orange-700/50 rounded-lg flex flex-col items-center justify-center hover:bg-orange-200 dark:hover:bg-orange-900/60 cursor-pointer transition-colors group">
|
||||
<Building2 size={32} className="text-orange-500 mb-2" />
|
||||
<span className="font-bold text-orange-800 dark:text-orange-200">Bloco B</span>
|
||||
<div className="absolute -top-8 opacity-0 group-hover:opacity-100 bg-black text-white text-xs px-2 py-1 rounded transition-opacity">8 andares • 16 Frações</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-10 right-10 w-64 h-48 bg-green-100 dark:bg-green-900/40 border-2 border-green-300 dark:border-green-700/50 rounded-2xl flex flex-col items-center justify-center hover:bg-green-200 dark:hover:bg-green-900/60 cursor-pointer transition-colors group">
|
||||
<Trophy size={40} className="text-green-600 mb-2" />
|
||||
<span className="font-bold text-green-800 dark:text-green-200">Parque de Jogos</span>
|
||||
<span className="text-xs text-green-600 dark:text-green-300">Campo Polidesportivo</span>
|
||||
<div className="absolute -bottom-8 opacity-0 group-hover:opacity-100 bg-black text-white text-xs px-2 py-1 rounded transition-opacity z-10">Clique para reservar</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-10 right-10 w-64 h-32 bg-blue-100 dark:bg-blue-900/40 border-2 border-blue-300 dark:border-blue-700/50 rounded-lg flex items-center justify-around hover:bg-blue-200 dark:hover:bg-blue-900/60 cursor-pointer transition-colors">
|
||||
<div className="flex flex-col items-center group">
|
||||
<PartyPopper size={24} className="text-blue-600 mb-1" />
|
||||
<span className="text-xs font-bold text-blue-800 dark:text-blue-200">Salão Festas</span>
|
||||
</div>
|
||||
<div className="w-px h-20 bg-blue-300 dark:bg-blue-700"></div>
|
||||
<div className="flex flex-col items-center group">
|
||||
<Dumbbell size={24} className="text-blue-600 mb-1" />
|
||||
<span className="text-xs font-bold text-blue-800 dark:text-blue-200">Ginásio</span>
|
||||
{espacos.map(loc => {
|
||||
const IconComp = IconMap[loc.icone] || MapPin;
|
||||
return (
|
||||
<div
|
||||
key={loc.id}
|
||||
onClick={() => setActivePoint(loc.id)}
|
||||
onMouseEnter={() => setActivePoint(loc.id)}
|
||||
className={`absolute flex flex-col items-center justify-center cursor-pointer transition-all duration-300 border-2 ${loc.bg} ${loc.border} ${activePoint === loc.id ? 'scale-110 shadow-lg z-20 ring-4 ring-blue-400/30' : 'hover:scale-105 shadow-sm z-10'} ${loc.isRound ? 'rounded-full' : 'rounded-lg'}`}
|
||||
style={{ left: `${loc.x}%`, top: `${loc.y}%`, width: `${loc.w}%`, height: `${loc.h}%` }}
|
||||
>
|
||||
<IconComp size={loc.isRound ? 16 : 24} className={`${loc.color} ${activePoint === loc.id ? 'animate-bounce' : ''}`} />
|
||||
{!loc.isRound && (
|
||||
<span className={`font-bold text-[9px] sm:text-[10px] mt-1 text-center px-1 text-slate-800 dark:text-slate-200 leading-tight`}>
|
||||
{loc.nome}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-slate-800 dark:bg-slate-700 rounded-full border-4 border-slate-200 dark:border-slate-600 shadow-xl flex flex-col items-center justify-center text-white z-10">
|
||||
<Info size={24} />
|
||||
<span className="text-[10px] mt-1 font-bold">Recepção</span>
|
||||
{/* Tabela lateral / Legenda */}
|
||||
<div className="w-full lg:w-96 border-t lg:border-t-0 lg:border-l border-slate-200 dark:border-dark-border bg-white dark:bg-dark-surface overflow-y-auto flex flex-col h-[400px] lg:h-auto">
|
||||
<div className="p-4 bg-slate-50 dark:bg-dark-card border-b border-slate-200 dark:border-dark-border sticky top-0 z-10">
|
||||
<h4 className="font-bold text-slate-800 dark:text-white flex items-center gap-2">
|
||||
<MapPin size={18} className="text-blue-600" /> Detalhes e Navegação
|
||||
</h4>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Selecione um ponto no mapa para ver rotas.</p>
|
||||
</div>
|
||||
<div className="flex-1 p-3 space-y-2">
|
||||
{espacos.map(loc => {
|
||||
const IconComp = IconMap[loc.icone] || MapPin;
|
||||
return (
|
||||
<div
|
||||
key={`list-${loc.id}`}
|
||||
onClick={() => setActivePoint(loc.id)}
|
||||
className={`p-3 rounded-xl cursor-pointer transition-all border ${activePoint === loc.id ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 shadow-md transform scale-[1.02]' : 'bg-white border-slate-100 hover:border-slate-300 dark:bg-dark-card dark:border-dark-border hover:bg-slate-50 dark:hover:bg-dark-bg'}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`p-2.5 rounded-lg border ${loc.bg} ${loc.border}`}>
|
||||
<IconComp size={20} className={loc.color} />
|
||||
</div>
|
||||
<div className="flex-1 pt-1">
|
||||
<div className="flex justify-between items-start">
|
||||
<h5 className="font-bold text-sm text-slate-800 dark:text-white">{loc.nome}</h5>
|
||||
<span className={`text-[9px] uppercase font-bold px-2 py-0.5 rounded-full ${loc.tipo === 'Residencial' ? 'bg-orange-100 text-orange-700' : loc.tipo === 'Comércio' ? 'bg-amber-100 text-amber-700' : loc.tipo === 'Lazer' ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-700'} dark:bg-opacity-20`}>{loc.tipo}</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{loc.descricao}</p>
|
||||
|
||||
{activePoint === loc.id && (
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleRoute(loc); }}
|
||||
disabled={isLocating}
|
||||
className="w-full text-xs bg-indigo-600 text-white px-3 py-2 rounded-lg hover:bg-indigo-700 transition-colors shadow-sm flex items-center justify-center gap-1.5 font-bold disabled:opacity-50"
|
||||
>
|
||||
<Navigation size={14} /> {isLocating ? 'A localizar...' : 'Navegar até aqui'}
|
||||
</button>
|
||||
|
||||
{loc.canBook && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleOpenModal('booking', null, loc.bookId); }}
|
||||
className="w-full text-xs bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm flex items-center justify-center gap-1.5 font-bold"
|
||||
>
|
||||
<Calendar size={14} /> Fazer Reserva
|
||||
</button>
|
||||
)}
|
||||
|
||||
{route && route.targetId === loc.id && (
|
||||
<div className="mt-2 bg-indigo-50 dark:bg-indigo-900/30 p-3 rounded-lg border border-indigo-100 dark:border-indigo-800/50 animate-fade-in">
|
||||
<h6 className="text-[10px] uppercase font-bold text-indigo-800 dark:text-indigo-300 mb-2 border-b border-indigo-200 dark:border-indigo-700 pb-1">Detalhes da Rota</h6>
|
||||
<div className="flex justify-between items-center text-xs text-slate-700 dark:text-slate-300">
|
||||
<span className="flex items-center gap-1"><MapPin size={12} className="text-indigo-500"/> Distância:</span>
|
||||
<span className="font-bold">{route.distance > 1000 ? (route.distance/1000).toFixed(1) + ' km' : Math.round(route.distance) + ' m'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs text-slate-700 dark:text-slate-300 mt-1.5">
|
||||
<span className="flex items-center gap-1"><Info size={12} className="text-indigo-500"/> A pé:</span>
|
||||
<span className="font-bold">{route.walkTime} min</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs text-slate-700 dark:text-slate-300 mt-1.5">
|
||||
<span className="flex items-center gap-1"><Car size={12} className="text-indigo-500"/> De carro:</span>
|
||||
<span className="font-bold">{route.driveTime} min</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
const MaintenanceView = () => (
|
||||
<div className="bg-white dark:bg-dark-surface rounded-xl shadow-sm border border-slate-100 dark:border-dark-border overflow-hidden animate-fade-in flex flex-col h-full transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user