Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Lightbox, fix photo gallery accessibility, update local assets and OG tags for Vercel deployment

Browse Source
This commit is contained in:
Satyam
2026-02-13 05:49:55 +05:30
parent c602b3b152
commit cc58b148e4
28 changed files with 1096 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IntelligenceMap.jsx
+24 -95
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Icons } from './landing/constants';
import MapBg from '../assets/images/hyper_intelligence_bg_image.jpg';
import IntelligenceSidePanel from './dashboard/IntelligenceSidePanel';
// Updated with Residential & Commercial mix
const hotspots = [
@@ -16,7 +17,11 @@ const hotspots = [
weather: 'Hail Expected',
status: 'Urgent',
specs: { built: '1998', maintenance: '5 years since last coating' },
management: { name: 'Sterling Properties', contact: 'Sign in for contact details' }
management: { name: 'Sterling Properties', contact: 'Sign in for contact details' },
photos: [
{ id: 1, url: '/assets/images/properties/Warehouse_Roof_Aerial.jpg', caption: 'Warehouse Roof Aerial' },
{ id: 2, url: '/assets/images/properties/Office_Roof_Top_View.jpg', caption: 'Office Roof Top' }
]
},
{
id: 2,
@@ -29,7 +34,10 @@ const hotspots = [
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' }
management: { name: 'Goldman Group', contact: 'Sign in for contact details' },
photos: [
{ id: 3, url: '/assets/images/properties/Mall_Rooftop_HVAC_Units.jpg', caption: 'Rooftop HVAC Units' }
]
},
{
id: 3,
@@ -42,7 +50,11 @@ const hotspots = [
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' }
owner: { fico: '715', profile: 'Early Adopter / Long-term value' },
photos: [
{ id: 4, url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', caption: 'Hail Damage Close-up' },
{ id: 5, url: '/assets/images/properties/Broken_Roof_Surface.jpg', caption: 'Broken Surface' }
]
},
{
id: 4,
@@ -55,7 +67,11 @@ const hotspots = [
weather: 'Windy',
status: 'Low Priority',
specs: { roofSize: '45 sq Roof', eventHistory: 'High Wind Zone' },
owner: { fico: '680', profile: 'First-time Buyer' }
owner: { fico: '680', profile: 'First-time Buyer' },
photos: [
{ id: 6, url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', caption: 'Cracked Shingles' },
{ id: 7, url: '/assets/images/properties/Curled_Aging_Shingles.jpg', caption: 'Aging Shingles' }
]
},
];
@@ -190,97 +206,10 @@ const IntelligenceMap = () => {
{/* Right Sidebar Panel (Glass Detail View) */}
{activeSpot && (
<div className="absolute top-4 right-4 bottom-4 w-80 bg-slate-900/80 backdrop-blur-xl rounded-xl p-6 shadow-2xl border border-white/10 transform transition-transform duration-300 z-40 flex flex-col text-white">
<div className="flex justify-between items-center mb-6 pb-4 border-b border-white/10">
<div className="flex items-center gap-2">
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
<h3 className="font-heading font-bold text-lg tracking-wide">INTEL_FEED</h3>
</div>
<button onClick={() => setActiveSpot(null)} className="text-gray-400 hover:text-white transition-colors">✕</button>
</div>
<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 group/card hover:bg-cyan-400/10 transition-colors">
<div className="absolute top-0 right-0 p-1 opacity-20 group-hover/card:opacity-40 transition-opacity">
<Icons.Chart />
</div>
<label className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-1 block">Projected Value</label>
<div className="text-3xl font-heading font-bold text-white">{activeSpot.gain}</div>
</div>
<div>
<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-xs text-gray-400">Dallas-Fort Worth Metroplex • {activeSpot.type} Zone</div>
</div>
{/* Divider */}
<div className="h-px bg-white/10 w-full"></div>
<div>
<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'}`}>
<span className="animate-pulse">⚠</span> {activeSpot.problem}
</div>
</div>
{/* 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">
&gt; 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>
<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
</button>
</div>
<IntelligenceSidePanel
data={activeSpot}
onClose={() => setActiveSpot(null)}
/>
)}
</div>