feat: Enhance Map Intelligence with rich data and login redirects
This commit is contained in:
Satyam
@@ -1,16 +1,66 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { Icons } from './landing/constants';
|
import { Icons } from './landing/constants';
|
||||||
import MapBg from '../assets/images/hyper_intelligence_bg_image.jpg';
|
import MapBg from '../assets/images/hyper_intelligence_bg_image.jpg';
|
||||||
|
|
||||||
// Updated with Residential & Commercial mix
|
// Updated with Residential & Commercial mix
|
||||||
const hotspots = [
|
const hotspots = [
|
||||||
{ id: 1, top: '45%', left: '65%', address: 'Preston Royal Village', type: 'Commercial', problem: 'Roof Membrane Uplift', gain: '+$8.5M Value', weather: 'Hail Expected', status: 'Urgent' },
|
{
|
||||||
{ id: 2, top: '28%', left: '42%', address: 'Highland Park Place', type: 'Commercial', problem: 'HVAC Unit Leakage', gain: '+$22M Asset', weather: 'Clear', status: 'Monitoring' },
|
id: 1,
|
||||||
{ id: 3, top: '55%', left: '25%', address: '4200 Beverly Dr', type: 'Residential', problem: 'Slate Tile Damage', gain: '+$3.2M Estate', weather: 'Rain Soon', status: 'Action Required' },
|
top: '45%',
|
||||||
{ id: 4, top: '70%', left: '48%', address: '3505 Lexington Ave', type: 'Residential', problem: 'Asphalt Shingle Loss', gain: '+$950k Home', weather: 'Windy', status: 'Low Priority' },
|
left: '65%',
|
||||||
|
address: 'Preston Royal Village',
|
||||||
|
type: 'Commercial',
|
||||||
|
problem: 'Roof Membrane Uplift',
|
||||||
|
gain: '+$8.5M Value',
|
||||||
|
weather: 'Hail Expected',
|
||||||
|
status: 'Urgent',
|
||||||
|
specs: { built: '1998', maintenance: '5 years since last coating' },
|
||||||
|
management: { name: 'Sterling Properties', contact: 'Sign in for contact details' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
top: '28%',
|
||||||
|
left: '42%',
|
||||||
|
address: 'Highland Park Place',
|
||||||
|
type: 'Commercial',
|
||||||
|
problem: 'Critical Membrane Failure',
|
||||||
|
gain: '$22.5 Million',
|
||||||
|
weather: 'Clear',
|
||||||
|
status: 'Monitoring',
|
||||||
|
specs: { built: '1982', maintenance: '20 years since last roof replacement permit' },
|
||||||
|
management: { name: 'Goldman Group', contact: 'Sign in for contact details' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
top: '55%',
|
||||||
|
left: '25%',
|
||||||
|
address: '4200 Beverly Dr',
|
||||||
|
type: 'Residential',
|
||||||
|
problem: 'Severe Hail Impact',
|
||||||
|
gain: '$1.1M',
|
||||||
|
weather: 'Rain Soon',
|
||||||
|
status: 'Action Required',
|
||||||
|
specs: { roofSize: '62 sq Roof', eventHistory: '8 years since last known hail event' },
|
||||||
|
owner: { fico: '715', profile: 'Early Adopter / Long-term value' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
top: '70%',
|
||||||
|
left: '48%',
|
||||||
|
address: '3505 Lexington Ave',
|
||||||
|
type: 'Residential',
|
||||||
|
problem: 'Asphalt Shingle Loss',
|
||||||
|
gain: '+$950k Home',
|
||||||
|
weather: 'Windy',
|
||||||
|
status: 'Low Priority',
|
||||||
|
specs: { roofSize: '45 sq Roof', eventHistory: 'High Wind Zone' },
|
||||||
|
owner: { fico: '680', profile: 'First-time Buyer' }
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const IntelligenceMap = () => {
|
const IntelligenceMap = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [activeSpot, setActiveSpot] = useState(null);
|
const [activeSpot, setActiveSpot] = useState(null);
|
||||||
const [showRescheduleDialog, setShowRescheduleDialog] = useState(false);
|
const [showRescheduleDialog, setShowRescheduleDialog] = useState(false);
|
||||||
|
|
||||||
@@ -150,8 +200,8 @@ const IntelligenceMap = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-grow space-y-6">
|
<div className="flex-grow space-y-6">
|
||||||
<div className="p-4 bg-cyan-400/5 rounded-lg border border-cyan-400/20 relative overflow-hidden">
|
<div className="p-4 bg-cyan-400/5 rounded-lg border border-cyan-400/20 relative overflow-hidden group/card hover:bg-cyan-400/10 transition-colors">
|
||||||
<div className="absolute top-0 right-0 p-1 opacity-20">
|
<div className="absolute top-0 right-0 p-1 opacity-20 group-hover/card:opacity-40 transition-opacity">
|
||||||
<Icons.Chart />
|
<Icons.Chart />
|
||||||
</div>
|
</div>
|
||||||
<label className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-1 block">Projected Value</label>
|
<label className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-1 block">Projected Value</label>
|
||||||
@@ -161,21 +211,73 @@ const IntelligenceMap = () => {
|
|||||||
<div>
|
<div>
|
||||||
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Location Target</label>
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Location Target</label>
|
||||||
<div className="text-white font-bold text-lg leading-tight mb-1">{activeSpot.address}</div>
|
<div className="text-white font-bold text-lg leading-tight mb-1">{activeSpot.address}</div>
|
||||||
<div className="text-xs text-gray-400">Dallas-Fort Worth Metroplex</div>
|
<div className="text-xs text-gray-400">Dallas-Fort Worth Metroplex • {activeSpot.type} Zone</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<div className="h-px bg-white/10 w-full"></div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Detected Issue</label>
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-2 block">Detected Issue</label>
|
||||||
<div className={`flex items-center gap-2 font-bold ${activeSpot.problem.includes('Severe') ? 'text-red-500' : 'text-yellow-400'}`}>
|
<div className={`flex items-center gap-2 font-bold ${activeSpot.problem.includes('Severe') ? 'text-red-500' : 'text-yellow-400'}`}>
|
||||||
<span>⚠</span> {activeSpot.problem}
|
<span className="animate-pulse">⚠</span> {activeSpot.problem}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
> ANALYSIS: {activeSpot.type === 'Commercial' ? 'High-value commercial asset at risk. Immediate inspection recommended to prevent business interruption.' : '85% probability of insurance approval due to recent hail corridor overlap in zip code 75201.'}
|
{/* Dynamic Specs & Intel Based on Type */}
|
||||||
|
{activeSpot.type === 'Commercial' && activeSpot.specs ? (
|
||||||
|
<div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Built</label>
|
||||||
|
<div className="text-sm text-white font-medium">{activeSpot.specs.built}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Maintenance</label>
|
||||||
|
<div className="text-sm text-white font-medium">{activeSpot.specs.maintenance}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-slate-800/50 rounded-lg border border-white/5">
|
||||||
|
<label className="text-[10px] text-purple-400 font-bold uppercase tracking-widest mb-1 block">Management</label>
|
||||||
|
<div className="text-sm text-white font-bold">{activeSpot.management.name}</div>
|
||||||
|
<div onClick={() => navigate('/login')} className="text-xs text-blue-400 cursor-pointer hover:underline mt-1">{activeSpot.management.contact}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : activeSpot.type === 'Residential' && activeSpot.specs ? (
|
||||||
|
<div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Roof Specs</label>
|
||||||
|
<div className="text-sm text-white font-medium">{activeSpot.specs.roofSize}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1 block">Risk History</label>
|
||||||
|
<div className="text-sm text-white font-medium">{activeSpot.specs.eventHistory}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-slate-800/50 rounded-lg border border-white/5">
|
||||||
|
<label className="text-[10px] text-emerald-400 font-bold uppercase tracking-widest mb-1 block">Owner Intelligence</label>
|
||||||
|
<div className="flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-gray-400 mb-0.5">FICO Score</div>
|
||||||
|
<div className="text-sm text-white font-bold">{activeSpot.owner.fico}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-xs text-gray-400 mb-0.5">Profile</div>
|
||||||
|
<div className="text-xs text-white font-medium">{activeSpot.owner.profile}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-xs text-gray-400 italic">
|
||||||
|
> ANALYSIS: {activeSpot.type === 'Commercial' ? 'High-value commercial asset at risk. Immediate inspection recommended.' : 'High probability of insurance approval due to recent storm activity.'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button className="w-full bg-cyan-400 hover:bg-white text-slate-900 font-bold py-3 rounded-lg transition-all duration-300 shadow-[0_0_20px_rgba(0,229,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.4)] uppercase tracking-widest text-xs">
|
<button onClick={() => navigate('/login')} className="w-full bg-cyan-400 hover:bg-white text-slate-900 font-bold py-3 rounded-lg transition-all duration-300 shadow-[0_0_20px_rgba(0,229,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.4)] uppercase tracking-widest text-xs">
|
||||||
Dispatch Sales Rep
|
Dispatch Sales Rep
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user