+ {/* Header */}
+
+ );
+};
+
+export default IntelligenceSidePanel;
diff --git a/src/components/maps/PropertyDetailDrawer.jsx b/src/components/maps/PropertyDetailDrawer.jsx
new file mode 100644
index 0000000..8309da8
--- /dev/null
+++ b/src/components/maps/PropertyDetailDrawer.jsx
@@ -0,0 +1,684 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Home, DollarSign, User, Edit2, Save, Info, AlertCircle, ShieldCheck, Loader2, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
+import { SpotlightCard } from '../SpotlightCard';
+
+const StatusBadge = ({ status }) => {
+ const colors = {
+ "Neutral": "bg-violet-400",
+ "Hot Lead": "bg-red-500",
+ "Renovated": "bg-blue-500",
+ "Customer": "bg-emerald-500",
+ "Not Interested": "bg-white border border-zinc-200 text-zinc-900 shadow-sm"
+ };
+ return (
+
+ {status}
+
+ );
+};
+
+const InputGroup = ({ label, children }) => (
+
+
+
+ {/* Tabs */}
+
+
+
+
+ INTEL_FEED
+
+
+
+
+
+ {/* Content Area */}
+
+
+ {/* DETAILS TAB */}
+ {activeTab === 'details' && (
+
+
+ {/* LIGHTBOX OVERLAY */}
+ {lightboxIndex !== null && photos[lightboxIndex] && (
+
+
+ )}
+
+ {/* PHOTOS TAB */}
+ {activeTab === 'photos' && (
+
+
+
+
+
+
+ {data.gain}
+
+
+
+
+ {/* Divider */}
+
+
+ {data.address}
+ Dallas-Fort Worth Metroplex • {data.type} Zone
+
+
+
+
+ {/* Dynamic Specs & Intel Based on Type */}
+ {data.type === 'Commercial' && data.specs ? (
+
+ ⚠ {data.problem}
+
+
+
+ ) : data.type === 'Residential' && data.specs ? (
+
+
+
+
+
+ {data.specs.built}
+
+
+
+ {data.specs.maintenance}
+
+
+
+ {data.management.name}
+ navigate('/login')}
+ className="text-xs text-blue-400 cursor-pointer hover:underline mt-1 focus:outline-none focus:ring-1 focus:ring-blue-400 rounded"
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => { if (e.key === 'Enter') navigate('/login'); }}
+ >
+ {data.management.contact}
+
+
+
+ ) : (
+
+
+
+
+
+ {data.specs.roofSize}
+
+
+
+ {data.specs.eventHistory}
+
+
+
+
+
+
+
+ FICO Score
+ {data.owner.fico}
+
+
+ Profile
+ {data.owner.profile}
+
+ > ANALYSIS: {data.type === 'Commercial' ? 'High-value commercial asset at risk. Immediate inspection recommended.' : 'High probability of insurance approval due to recent storm activity.'}
+
+ )}
+
+
+
+
+ {/* Photo Grid */}
+
+ )}
+ {/* pb-20 for bottom fixed button space if needed, though button is inline here */}
+ {photos.map((photo, index) => (
+
+ setLightboxIndex(index)}
+ >
+ 
+
+ ))}
+
+ {/* Upload Placeholders if empty */}
+ {photos.length === 0 && (
+
+ View
+
+
+
+
+
+ )}
+ No photos available
+
+ {/* Close Button */}
+
+
+ {/* Navigation Left */}
+
+
+ {/* Main Image */}
+
+ )}
+
+ ![{photos[lightboxIndex].caption]({photos[lightboxIndex].url})
+
+
+
+ {/* Navigation Right */}
+
+
+ {/* Mobile Navigation Hints */}
+
+ IMG_SEQ: {lightboxIndex + 1} / {photos.length}
+
+
+ < PREV
+ NEXT >
+
+
+
+
+);
+
+const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, loadingAddr, allowUpload = true }) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [activeTab, setActiveTab] = useState('details');
+ // Initialize photos from data or use empty array
+ const [photos, setPhotos] = useState([]);
+
+ // Lightbox State
+ const [lightboxIndex, setLightboxIndex] = useState(null); // null = closed, number = open at index
+
+ const panelRef = useRef(null);
+ const closeButtonRef = useRef(null);
+ const lightboxRef = useRef(null);
+
+ // Initial State Matching Schema
+ const initialFormState = {
+ // Status
+ status: 'Neutral',
+ // 1.1 Basic Property Details
+ propertyType: 'House',
+ builtUpArea: '',
+ lotSize: '',
+ yearBuilt: '',
+ bedrooms: '',
+ bathrooms: '',
+ parkingSpaces: '',
+ // 1.2 Transaction & Market
+ purchaseDate: '',
+ purchasePrice: '',
+ marketValue: 0,
+ taxValue: '',
+ // 1.3 Renovation
+ roofCondition: 'Good',
+ lastRenovationDate: '',
+ // 1.4 Rental Status
+ isRented: 'No', // Yes/No
+ tenantName: '',
+ currentRent: '',
+ leaseEnd: '',
+ ownerWillingToRent: 'Yes',
+ expectedRent: '',
+ // 1.5 Location
+ schoolDistrict: '',
+ neighborhoodRating: 5,
+ // 2.1 Owner Details
+ ownerName: '',
+ ownerPhone: '',
+ ownerEmail: '',
+ ownerAddress: '',
+ occupation: '',
+ ownershipType: 'Individual',
+ // 2.4 Owner Intent
+ willingToSell: 'No',
+ desiredPrice: '',
+ minPrice: '',
+ // 3.0 Insurance Information
+ insurance_company: '',
+ insurance_company_not_listed: false,
+ damage_location: '',
+ date_of_loss: '',
+ claim_filed: 'No',
+ claim_number: '',
+ has_paperwork: 'No',
+ adjuster_name: '',
+ adjuster_phone: '',
+ adjuster_ext: '',
+ adjuster_type: '',
+ adjuster_fax: '',
+ adjuster_email: '',
+ met_with_adjuster: 'No',
+ claim_approved: 'No',
+ // Notes
+ notes: ''
+ };
+
+ const [formData, setFormData] = useState(initialFormState);
+
+ // Reset or Initialize Form
+ useEffect(() => {
+ if (data) {
+ setFormData({
+ ...initialFormState,
+ status: data.canvassingStatus || 'Neutral',
+ ownerName: data.ownerData?.fullName || '',
+ ownerPhone: data.ownerData?.primaryPhoneNumber || '',
+ ownerEmail: data.ownerData?.emailAddress || '',
+ marketValue: data.propertyData?.currentEstimatedMarketValue || 0,
+ notes: data.propertyData?.notes || '',
+ propertyType: data.propertyData?.propertyType || 'House',
+ builtUpArea: data.propertyData?.totalBuiltUpArea || '',
+ lotSize: data.propertyData?.lotPlotSize || '',
+ yearBuilt: data.propertyData?.yearBuilt || '',
+ bedrooms: data.propertyData?.numberOfBedrooms || '',
+ bathrooms: data.propertyData?.numberOfBathrooms || '',
+ parkingSpaces: data.propertyData?.numberOfParkingSpaces || '',
+ taxValue: data.propertyData?.propertyTaxAssessmentValue || '',
+ roofCondition: data.propertyData?.roofCondition || 'Good',
+ lastRenovationDate: data.propertyData?.lastMajorRenovationDate || '',
+ isRented: data.propertyData?.currentlyRented ? 'Yes' : 'No',
+ tenantName: data.propertyData?.currentTenantName || '',
+ currentRent: data.propertyData?.currentMonthlyRentAmount || '',
+ leaseEnd: data.propertyData?.leaseEndDate || '',
+ ownerWillingToRent: data.propertyData?.ownerWillingToRent ? 'Yes' : 'No',
+ expectedRent: data.propertyData?.expectedMonthlyRentAmount || '',
+ schoolDistrict: data.propertyData?.schoolDistrict || '',
+ neighborhoodRating: data.propertyData?.neighborhoodRating || 5,
+ occupation: data.ownerData?.occupation || '',
+ ownershipType: data.ownerData?.ownershipType || 'Individual',
+ willingToSell: data.ownerData?.willingToSellProperty ? 'Yes' : 'No',
+ desiredPrice: data.ownerData?.desiredSellingPrice || '',
+ minPrice: data.ownerData?.minimumAcceptableSellingPrice || '',
+ ownerAddress: data.ownerData?.mailingAddress || '',
+ insurance_company: data.insuranceData?.insurance_company || '',
+ insurance_company_not_listed: data.insuranceData?.insurance_company_not_listed || false,
+ damage_location: data.insuranceData?.damage_location || '',
+ date_of_loss: data.insuranceData?.date_of_loss || '',
+ claim_filed: data.insuranceData?.claim_filed ? 'Yes' : 'No',
+ claim_number: data.insuranceData?.claim_number || '',
+ has_paperwork: data.insuranceData?.has_paperwork ? 'Yes' : 'No',
+ adjuster_name: data.insuranceData?.adjuster_name || '',
+ adjuster_phone: data.insuranceData?.adjuster_phone || '',
+ adjuster_ext: data.insuranceData?.adjuster_ext || '',
+ adjuster_type: data.insuranceData?.adjuster_type || '',
+ adjuster_fax: data.insuranceData?.adjuster_fax || '',
+ adjuster_email: data.insuranceData?.adjuster_email || '',
+ met_with_adjuster: data.insuranceData?.met_with_adjuster ? 'Yes' : 'No',
+ claim_approved: data.insuranceData?.claim_approved ? 'Yes' : 'No',
+ });
+ setIsEditing(false);
+ setPhotos(data.photos || []);
+ } else if (newLocation) {
+ setFormData(initialFormState);
+ setIsEditing(true);
+ setPhotos([]);
+ }
+ setActiveTab('details');
+ }, [data, newLocation]);
+
+ // Accessibility: Focus and key listeners for Drawer
+ useEffect(() => {
+ if (isOpen && closeButtonRef.current) {
+ closeButtonRef.current.focus();
+ }
+
+ const handleKeyDown = (e) => {
+ if (e.key === 'Escape') {
+ // If Lightbox is open, close it first
+ if (lightboxIndex !== null) {
+ setLightboxIndex(null);
+ return;
+ }
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleKeyDown);
+ }
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [isOpen, onClose, lightboxIndex]);
+
+ // Lightbox Keyboard Navigation
+ useEffect(() => {
+ if (lightboxIndex === null) return;
+
+ const handleLightboxKeys = (e) => {
+ if (e.key === 'ArrowRight') {
+ setLightboxIndex((prev) => (prev + 1) % photos.length);
+ } else if (e.key === 'ArrowLeft') {
+ setLightboxIndex((prev) => (prev - 1 + photos.length) % photos.length);
+ }
+ };
+
+ document.addEventListener('keydown', handleLightboxKeys);
+ return () => document.removeEventListener('keydown', handleLightboxKeys);
+ }, [lightboxIndex, photos.length]);
+
+ const handleSave = () => {
+ onSave(formData);
+ if (data) setIsEditing(false);
+ };
+
+ // Photo Logic
+ const handleUploadPhoto = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const newPhoto = {
+ id: Date.now(),
+ url: URL.createObjectURL(file), // Mock URL
+ caption: file.name
+ };
+ setPhotos([...photos, newPhoto]);
+ // Ideally notify parent to save photos
+ }
+ };
+
+ const handleDeletePhoto = (id) => {
+ setPhotos(photos.filter(p => p.id !== id));
+ };
+
+ if (!isOpen) return null;
+
+ const isCreating = !data && !!newLocation;
+ const address = data?.propertyData?.propertyAddress || newLocation?.address || "Unknown Location";
+
+ // Helper for Inputs
+ const RenderInput = ({ label, field, type = "text", placeholder, options, locked = false }) => {
+ if (!isEditing) {
+ return (
+ {children}
+
+ {placeholder || "Not Applicable"}
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ {/* Tabs */}
+ {!loadingAddr && (
+
+
+
+ {isCreating ? New Entry :
+ {loadingAddr ? "Fetching Address..." : address.split(',')[0]}
+ {loadingAddr ? "Locating..." : address} +
+
+
+
+ )}
+
+ {/* Body Content */}
+
+
+ {loadingAddr ? (
+
+
+ ) : (
+ <>
+ {/* DETAILS TAB */}
+ {activeTab === 'details' && (
+
+ {/* Status Selector */}
+ {isEditing && (
+
+
+
+ )}
+
+ {/* SECTION 1: BASIC PROPERTY INFO */}
+
+ {["Neutral", "Hot Lead", "Renovated", "Customer", "Not Interested"].map(s => (
+
+ ))}
+
+
+
+
+ {/* SECTION 2: VALUES & CONDITION */}
+
+
+ Property Basics
+
+
+
+
+
+
+
+ {/* SECTION 3: RENTAL STATUS (Conditional) */}
+
+
+ Value & Condition
+
+
+
+
+
+ {/* SECTION 4: INSURANCE INFORMATION */}
+
+
+
+ Rental Status
+
+
+ ) : (
+ Tenant Profile
+
+
+
+
+
+
+
+ Lease Details
+
+
+
+
+ )}
+
+
+
+ {/* SECTION 5: OWNER INTENT (Conditional) */}
+
+
+
+ Insurance Information
+
+
+
+ isEditing && setFormData({ ...formData, insurance_company_not_listed: e.target.checked })}
+ disabled={!isEditing}
+ className="rounded border-zinc-300 dark:border-white/10"
+ />
+ Company Not Listed
+
+
+
+
+
+ {formData.claim_filed === 'Yes' && (
+
+
+ )}
+
+
+
+ Adjuster Details
+
+
+
+
+
+
+
+
+
+ {/* SECTION 5: OWNER CONTACT */}
+
+
+
+ Recall & Sales Intent
+
+
+
+ {formData.willingToSell === 'Yes' ? (
+
+
+ ) : (
+
+
+
+
+
+ {/* SECTION 6: NOTES */}
+
+
+ Owner Contact
+
+
+
+
+
+ {isEditing ? (
+