feat(dispatch): Phase 4 — Leaflet map panel with rep markers, lead pins, route polylines, and storm polygon
- Real Plano TX map using Leaflet with dark/light tile layer filter - Custom DivIcon rep markers (initials circles, pulsing ring on top AI pick) - Urgency-colored lead pins with radar rings on selected lead - Route polyline with stroke-dashoffset draw animation keyed to selected lead - Travel time chip at route midpoint — solid color background, white text, triple ring shadow - Storm polygon overlay (NE Plano) with Storm Zone Active badge - Route Active chip top-right, legend overlay bottom-left (rep status + lead urgency counts) - Hover tooltips on rep markers (name, status, slots, rating/close%) and lead pins (name, urgency, address, notes snippet) - invalidateSize() with 50ms defer + window resize listener to fix blank tile area after flex layout settles
This commit is contained in:
Satyam
@@ -0,0 +1,427 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { MapContainer, TileLayer, Marker, Polyline, Polygon, Tooltip, useMap } from 'react-leaflet';
|
||||||
|
import L from 'leaflet';
|
||||||
|
import 'leaflet/dist/leaflet.css';
|
||||||
|
import { useTheme } from '../../context/ThemeContext';
|
||||||
|
import { DISPATCH_REPS, DISPATCH_RECOMMENDATIONS } from '../../data/mockStore';
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Constants
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const PLANO_CENTER = [33.055, -96.752];
|
||||||
|
const DEFAULT_ZOOM = 12;
|
||||||
|
|
||||||
|
const REP_STATUS_COLORS = { available: '#10B981', en_route: '#3B82F6', busy: '#F59E0B' };
|
||||||
|
const REP_STATUS_LABELS = { available: 'Available', en_route: 'En Route', busy: 'Busy' };
|
||||||
|
const URGENCY_COLORS = { emergency: '#EF4444', high: '#F59E0B', standard: '#6B7280' };
|
||||||
|
|
||||||
|
// Storm polygon — northeast Plano, sweeping toward central
|
||||||
|
const STORM_POLYGON = [
|
||||||
|
[33.105, -96.745], [33.100, -96.695], [33.078, -96.682],
|
||||||
|
[33.051, -96.698], [33.042, -96.725], [33.058, -96.750],
|
||||||
|
[33.080, -96.758],
|
||||||
|
];
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Custom marker factories
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const createRepIcon = (rep, isTopPick) => {
|
||||||
|
const color = REP_STATUS_COLORS[rep.status] || '#6B7280';
|
||||||
|
const size = isTopPick ? 42 : 36;
|
||||||
|
const ring = isTopPick
|
||||||
|
? `<div style="position:absolute;inset:-5px;border-radius:50%;border:2px solid ${color};opacity:0.5;animation:repRing 1.6s ease-out infinite;"></div>`
|
||||||
|
: '';
|
||||||
|
return L.divIcon({
|
||||||
|
html: `
|
||||||
|
<div style="position:relative;width:${size}px;height:${size}px;">
|
||||||
|
${ring}
|
||||||
|
<div style="
|
||||||
|
width:${size}px;height:${size}px;border-radius:50%;
|
||||||
|
background:${color}DD;border:2.5px solid white;
|
||||||
|
display:flex;align-items:center;justify-content:center;
|
||||||
|
font-size:${isTopPick ? 12 : 11}px;font-weight:900;color:white;
|
||||||
|
font-family:system-ui,sans-serif;
|
||||||
|
box-shadow:0 3px 10px ${color}60,0 1px 3px rgba(0,0,0,0.25);
|
||||||
|
transition:transform 0.2s;
|
||||||
|
">${rep.initials}</div>
|
||||||
|
<div style="
|
||||||
|
position:absolute;bottom:-3px;right:-3px;
|
||||||
|
width:10px;height:10px;border-radius:50%;
|
||||||
|
background:${color};border:2px solid white;
|
||||||
|
"></div>
|
||||||
|
</div>`,
|
||||||
|
className: '',
|
||||||
|
iconSize: [size, size],
|
||||||
|
iconAnchor: [size / 2, size / 2],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const createLeadIcon = (lead, isSelected) => {
|
||||||
|
const color = URGENCY_COLORS[lead.urgency] || '#6B7280';
|
||||||
|
const size = isSelected ? 22 : 14;
|
||||||
|
const pulse = lead.urgency !== 'standard';
|
||||||
|
const radar = isSelected
|
||||||
|
? `<div style="position:absolute;inset:-7px;border-radius:50%;border:2px solid ${color};animation:radarPing 1.4s ease-out infinite;"></div>
|
||||||
|
<div style="position:absolute;inset:-14px;border-radius:50%;border:1.5px solid ${color};animation:radarPing 1.4s ease-out 0.4s infinite;"></div>`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return L.divIcon({
|
||||||
|
html: `
|
||||||
|
<div style="position:relative;width:${size}px;height:${size}px;${pulse && !isSelected ? 'animation:dotPulse 1.6s ease-in-out infinite;' : ''}">
|
||||||
|
${radar}
|
||||||
|
<div style="
|
||||||
|
width:${size}px;height:${size}px;border-radius:50%;
|
||||||
|
background:${color};border:2px solid white;
|
||||||
|
box-shadow:0 2px 6px ${color}80;
|
||||||
|
"></div>
|
||||||
|
</div>`,
|
||||||
|
className: '',
|
||||||
|
iconSize: [size, size],
|
||||||
|
iconAnchor: [size / 2, size / 2],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTravelChipIcon = (text, color) => {
|
||||||
|
const label = `⏱ ${text}`;
|
||||||
|
return L.divIcon({
|
||||||
|
html: `
|
||||||
|
<div style="
|
||||||
|
background:${color};
|
||||||
|
border-radius:999px;
|
||||||
|
padding:7px 16px;
|
||||||
|
font-size:15px;
|
||||||
|
font-weight:900;
|
||||||
|
color:#ffffff;
|
||||||
|
box-shadow:0 4px 16px rgba(0,0,0,0.45), 0 0 0 3px white, 0 0 0 5px ${color};
|
||||||
|
white-space:nowrap;
|
||||||
|
font-family:system-ui,sans-serif;
|
||||||
|
letter-spacing:0.2px;
|
||||||
|
text-shadow:0 1px 3px rgba(0,0,0,0.35);
|
||||||
|
pointer-events:none;
|
||||||
|
">${label}</div>`,
|
||||||
|
className: '',
|
||||||
|
iconAnchor: [56, 20],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// MapController — fits bounds when lead selection changes + fixes tile gaps
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const MapController = ({ selectedLeadId, leadPos, repPos, routePath }) => {
|
||||||
|
const map = useMap();
|
||||||
|
const prevId = useRef(null);
|
||||||
|
|
||||||
|
// Invalidate size on mount and on every window resize so Leaflet fills
|
||||||
|
// the full flex container — prevents the blank tile area on the right.
|
||||||
|
useEffect(() => {
|
||||||
|
const invalidate = () => map.invalidateSize({ animate: false });
|
||||||
|
// Defer one frame so the flex layout has fully settled
|
||||||
|
const t = setTimeout(invalidate, 50);
|
||||||
|
window.addEventListener('resize', invalidate);
|
||||||
|
return () => {
|
||||||
|
clearTimeout(t);
|
||||||
|
window.removeEventListener('resize', invalidate);
|
||||||
|
};
|
||||||
|
}, [map]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedLeadId === prevId.current) return;
|
||||||
|
prevId.current = selectedLeadId;
|
||||||
|
|
||||||
|
if (!leadPos || !repPos) return;
|
||||||
|
|
||||||
|
const positions = [leadPos, repPos, ...(routePath || [])].filter(Boolean);
|
||||||
|
if (positions.length < 2) return;
|
||||||
|
|
||||||
|
map.fitBounds(L.latLngBounds(positions), {
|
||||||
|
padding: [72, 72],
|
||||||
|
maxZoom: 14,
|
||||||
|
animate: true,
|
||||||
|
duration: 0.7,
|
||||||
|
});
|
||||||
|
}, [selectedLeadId]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// CSS animations — injected as a style block
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const MAP_STYLES = `
|
||||||
|
.dispatch-route {
|
||||||
|
stroke-dasharray: 5000;
|
||||||
|
stroke-dashoffset: 5000;
|
||||||
|
animation: drawRoute 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
|
||||||
|
}
|
||||||
|
@keyframes drawRoute {
|
||||||
|
to { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
@keyframes radarPing {
|
||||||
|
0% { transform: scale(1); opacity: 0.75; }
|
||||||
|
100% { transform: scale(1); opacity: 0; }
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
100% { transform: scale(2.4); opacity: 0; }
|
||||||
|
}
|
||||||
|
@keyframes dotPulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.3); opacity: 0.7; }
|
||||||
|
}
|
||||||
|
@keyframes repRing {
|
||||||
|
0% { transform: scale(1); opacity: 0.6; }
|
||||||
|
100% { transform: scale(1.8); opacity: 0; }
|
||||||
|
}
|
||||||
|
.leaflet-container { font-family: system-ui, sans-serif; }
|
||||||
|
.dispatch-tooltip {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||||
|
padding: 8px 10px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.dispatch-tooltip::before { display: none; }
|
||||||
|
.leaflet-tooltip.dispatch-tooltip { white-space: nowrap; }
|
||||||
|
`;
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main Component
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const DispatchMapPanel = ({ selectedLead, dispatchLeads, reps = DISPATCH_REPS, stormMode, accent, isDesktop }) => {
|
||||||
|
const { theme } = useTheme();
|
||||||
|
|
||||||
|
// Top recommendation for the selected lead
|
||||||
|
const topRec = selectedLead ? (DISPATCH_RECOMMENDATIONS[selectedLead.id]?.[0] ?? null) : null;
|
||||||
|
const topRep = topRec ? reps.find(r => r.id === topRec.repId) : null;
|
||||||
|
|
||||||
|
// Positions for bounds fitting
|
||||||
|
const leadPos = selectedLead
|
||||||
|
? [selectedLead.property.lat, selectedLead.property.lng]
|
||||||
|
: null;
|
||||||
|
const repPos = topRep
|
||||||
|
? [topRep.currentLat, topRep.currentLng]
|
||||||
|
: null;
|
||||||
|
|
||||||
|
// Travel time chip — midpoint of route
|
||||||
|
const routeMid = topRec?.routePath?.length
|
||||||
|
? topRec.routePath[Math.floor(topRec.routePath.length / 2)]
|
||||||
|
: null;
|
||||||
|
|
||||||
|
// Derive estimated drive minutes from top rec factors (driveTime score → minutes)
|
||||||
|
const driveMinutes = topRec
|
||||||
|
? Math.round(8 + ((100 - topRec.factors.driveTime) / 100) * 22)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const routeColor = stormMode ? '#F59E0B' : accent;
|
||||||
|
|
||||||
|
const containerStyle = isDesktop ? { height: 'calc(72rem + 2.375rem)' } : undefined;
|
||||||
|
const containerClass = !isDesktop
|
||||||
|
? 'min-h-[280px] sm:min-h-[360px] md:min-h-[420px]'
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`relative overflow-hidden ${containerClass}`} style={containerStyle}>
|
||||||
|
{/* Inject map animations */}
|
||||||
|
<style>{MAP_STYLES}</style>
|
||||||
|
|
||||||
|
<MapContainer
|
||||||
|
center={PLANO_CENTER}
|
||||||
|
zoom={DEFAULT_ZOOM}
|
||||||
|
scrollWheelZoom={true}
|
||||||
|
zoomControl={false}
|
||||||
|
className="w-full h-full"
|
||||||
|
style={{ height: '100%', width: '100%' }}
|
||||||
|
>
|
||||||
|
{/* Tile layer — dark/light aware */}
|
||||||
|
<TileLayer
|
||||||
|
key={theme}
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
className={
|
||||||
|
theme === 'dark'
|
||||||
|
? 'map-tiles filter invert grayscale contrast-100'
|
||||||
|
: 'map-tiles'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Fit bounds on lead selection */}
|
||||||
|
<MapController
|
||||||
|
selectedLeadId={selectedLead?.id}
|
||||||
|
leadPos={leadPos}
|
||||||
|
repPos={repPos}
|
||||||
|
routePath={topRec?.routePath}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Storm polygon */}
|
||||||
|
{stormMode && (
|
||||||
|
<Polygon
|
||||||
|
positions={STORM_POLYGON}
|
||||||
|
pathOptions={{
|
||||||
|
color: '#F59E0B',
|
||||||
|
fillColor: '#F59E0B',
|
||||||
|
fillOpacity: 0.13,
|
||||||
|
weight: 2,
|
||||||
|
dashArray: '6 5',
|
||||||
|
opacity: 0.7,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Route polyline — animates in with stroke-dashoffset draw */}
|
||||||
|
{topRec && (
|
||||||
|
<Polyline
|
||||||
|
key={selectedLead.id}
|
||||||
|
positions={topRec.routePath}
|
||||||
|
pathOptions={{
|
||||||
|
color: routeColor,
|
||||||
|
weight: 3.5,
|
||||||
|
opacity: 0.85,
|
||||||
|
className: 'dispatch-route',
|
||||||
|
lineCap: 'round',
|
||||||
|
lineJoin: 'round',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Lead pins */}
|
||||||
|
{dispatchLeads.map(lead => {
|
||||||
|
const urgColor = URGENCY_COLORS[lead.urgency] || '#6B7280';
|
||||||
|
const notesSnip = lead.notes
|
||||||
|
? (lead.notes.length > 55 ? lead.notes.slice(0, 55) + '…' : lead.notes)
|
||||||
|
: null;
|
||||||
|
return (
|
||||||
|
<Marker
|
||||||
|
key={lead.id}
|
||||||
|
position={[lead.property.lat, lead.property.lng]}
|
||||||
|
icon={createLeadIcon(lead, selectedLead?.id === lead.id)}
|
||||||
|
>
|
||||||
|
<Tooltip direction="top" offset={[0, -10]} opacity={1} className="dispatch-tooltip">
|
||||||
|
<div style={{ fontFamily: 'system-ui,sans-serif', minWidth: 150, maxWidth: 220 }}>
|
||||||
|
<p style={{ fontSize: 11, fontWeight: 700, color: '#18181b', marginBottom: 2 }}>
|
||||||
|
{lead.customer.name}
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 10, fontWeight: 700, color: urgColor, marginBottom: 2 }}>
|
||||||
|
{lead.urgency.toUpperCase()}
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 10, color: '#71717a', marginBottom: notesSnip ? 4 : 0 }}>
|
||||||
|
{lead.property.address}
|
||||||
|
</p>
|
||||||
|
{notesSnip && (
|
||||||
|
<p style={{ fontSize: 9, color: '#a1a1aa', fontStyle: 'italic', lineHeight: 1.4, borderTop: '1px solid #f0f0f0', paddingTop: 4 }}>
|
||||||
|
{notesSnip}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</Marker>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Rep markers */}
|
||||||
|
{reps.map(rep => {
|
||||||
|
const repColor = REP_STATUS_COLORS[rep.status] || '#6B7280';
|
||||||
|
return (
|
||||||
|
<Marker
|
||||||
|
key={rep.id}
|
||||||
|
position={[rep.currentLat, rep.currentLng]}
|
||||||
|
icon={createRepIcon(rep, topRep?.id === rep.id)}
|
||||||
|
>
|
||||||
|
<Tooltip direction="top" offset={[0, -10]} opacity={1} className="dispatch-tooltip">
|
||||||
|
<div style={{ fontFamily: 'system-ui,sans-serif', minWidth: 140 }}>
|
||||||
|
<p style={{ fontSize: 11, fontWeight: 800, color: repColor, marginBottom: 3 }}>
|
||||||
|
{rep.name}
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 10, color: '#71717a', marginBottom: 1 }}>
|
||||||
|
{REP_STATUS_LABELS[rep.status]} · {rep.todayAppointments}/{rep.maxDaily} slots
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: 10, color: '#71717a' }}>
|
||||||
|
★ {rep.rating} · {rep.closeRate}% close
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</Marker>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Travel time chip at route midpoint */}
|
||||||
|
{topRec && routeMid && driveMinutes && (
|
||||||
|
<Marker
|
||||||
|
key={`chip-${selectedLead.id}`}
|
||||||
|
position={routeMid}
|
||||||
|
icon={createTravelChipIcon(`~${driveMinutes} min`, routeColor)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</MapContainer>
|
||||||
|
|
||||||
|
{/* ── Legend overlay — bottom-left ── */}
|
||||||
|
<div className="absolute bottom-3 left-3 z-[1000] flex flex-col gap-1.5 pointer-events-none">
|
||||||
|
{/* Rep status legend */}
|
||||||
|
<div className="rounded-xl border bg-white/90 dark:bg-zinc-900/85 backdrop-blur-md border-zinc-200/80 dark:border-white/[0.08] px-2.5 py-2 shadow-lg">
|
||||||
|
<p className="text-[9px] font-black uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-1.5">Reps</p>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{Object.entries(REP_STATUS_COLORS).map(([status, color]) => (
|
||||||
|
<div key={status} className="flex items-center gap-1.5">
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
|
||||||
|
<span className="text-[10px] font-medium text-zinc-600 dark:text-zinc-300 capitalize">
|
||||||
|
{REP_STATUS_LABELS[status]}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-zinc-400 ml-1">
|
||||||
|
{DISPATCH_REPS.filter(r => r.status === status).length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lead urgency legend */}
|
||||||
|
<div className="rounded-xl border bg-white/90 dark:bg-zinc-900/85 backdrop-blur-md border-zinc-200/80 dark:border-white/[0.08] px-2.5 py-2 shadow-lg">
|
||||||
|
<p className="text-[9px] font-black uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-1.5">Leads</p>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{Object.entries(URGENCY_COLORS).map(([urgency, color]) => (
|
||||||
|
<div key={urgency} className="flex items-center gap-1.5">
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
|
||||||
|
<span className="text-[10px] font-medium text-zinc-600 dark:text-zinc-300 capitalize">
|
||||||
|
{urgency}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-zinc-400 ml-1">
|
||||||
|
{dispatchLeads.filter(l => l.urgency === urgency).length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Storm mode overlay label */}
|
||||||
|
{stormMode && (
|
||||||
|
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none">
|
||||||
|
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/90 backdrop-blur-sm shadow-lg">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-white">
|
||||||
|
Storm Zone Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Selected lead info chip — top right */}
|
||||||
|
{selectedLead && topRep && (
|
||||||
|
<div className="absolute top-3 right-3 z-[1000] pointer-events-none">
|
||||||
|
<div
|
||||||
|
className="rounded-xl border px-3 py-2 bg-white/92 dark:bg-zinc-900/85 backdrop-blur-md shadow-lg border-zinc-200/80 dark:border-white/[0.08]"
|
||||||
|
style={{ borderLeftWidth: 3, borderLeftColor: routeColor }}
|
||||||
|
>
|
||||||
|
<p className="text-[9px] font-black uppercase tracking-widest mb-0.5" style={{ color: routeColor }}>
|
||||||
|
Route Active
|
||||||
|
</p>
|
||||||
|
<p className="text-[11px] font-bold text-zinc-900 dark:text-white">{topRep.name}</p>
|
||||||
|
<p className="text-[10px] text-zinc-400 mt-0.5 truncate max-w-[140px]">
|
||||||
|
→ {selectedLead.property.address}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DispatchMapPanel;
|
||||||
Reference in New Issue
Block a user