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

feat: updated map legend and property colors

Browse Source
This commit is contained in:
Satyam
2026-02-01 19:22:10 +05:30
parent 69a899e785
commit 5526f4e195
2 changed files with 118 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Maps.jsx
+82 -10
View File
@@ -28,7 +28,7 @@ L.Marker.prototype.options.icon = DefaultIcon;
const StatusBadge = ({ status }) => {
const colors = {
"Neutral": "bg-zinc-500",
"Neutral": "bg-violet-400",
"Hot Lead": "bg-red-500",
"Renovated": "bg-blue-500",
"Customer": "bg-emerald-500",
@@ -51,6 +51,34 @@ const MapInteraction = ({ onMapClick }) => {
return null;
};
const MapLegend = () => (
<div className="absolute bottom-6 left-6 z-[1000] bg-white/90 dark:bg-black/90 backdrop-blur-md p-4 rounded-2xl border border-zinc-200 dark:border-white/10 shadow-xl">
<h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-3">Map Legend</h4>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500 shadow-sm shadow-red-500/50"></div>
<span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Hot Lead</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/50"></div>
<span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Customer</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 rounded-full bg-blue-500 shadow-sm shadow-blue-500/50"></div>
<span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Renovated</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 rounded-full bg-violet-400 shadow-sm shadow-violet-400/50"></div>
<span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Neutral</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-3 h-3 rounded-full bg-zinc-800 dark:bg-zinc-600 border border-white/20"></div>
<span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Not Interested</span>
</div>
</div>
</div>
);
// Map View
const MapView = ({ data, onSelect, onMapCreate }) => {
const mapStart = [33.0708, -96.7455];
@@ -74,13 +102,32 @@ const MapView = ({ data, onSelect, onMapCreate }) => {
/>
<MapInteraction onMapClick={onMapCreate} />
<MapLegend />
{data.map((item) => {
let color = "#71717a"; // zinc-500 default
// Adjust colors for light/dark mode visibility if needed, or keep consistent
if (item.canvassingStatus === "Hot Lead") color = "#ef4444"; // red-500
if (item.canvassingStatus === "Customer") color = "#10b981"; // emerald-500
if (item.canvassingStatus === "Renovated") color = "#3b82f6"; // blue-500
let color = "#a78bfa"; // Violet-400 (New Neutral)
let fillOpacity = 0.2;
switch (item.canvassingStatus) {
case "Hot Lead":
color = "#ef4444"; // Red-500
fillOpacity = 0.4;
break;
case "Customer":
color = "#10b981"; // Emerald-500
fillOpacity = 0.3;
break;
case "Renovated":
color = "#3b82f6"; // Blue-500
break;
case "Not Interested":
color = "#18181b"; // Zinc-900 (Blackish)
fillOpacity = 0.1;
break;
default:
// Neutral (Violet)
break;
}
return (
<Polygon
@@ -89,7 +136,7 @@ const MapView = ({ data, onSelect, onMapCreate }) => {
pathOptions={{
color: color,
fillColor: color,
fillOpacity: 0.2,
fillOpacity: fillOpacity,
weight: 2
}}
eventHandlers={{
@@ -176,9 +223,34 @@ const Drawer = ({ isOpen, onClose, data, newLocation, onUpdateStatus, onSave, lo
marketValue: data.propertyData?.currentEstimatedMarketValue || 0,
notes: data.propertyData?.notes || '',
propertyType: data.propertyData?.propertyType || 'House',
// Map other fields if they existed in data, otherwise defaults
...data.propertyData?.details, // Assuming we store extra details in a nested object `details` for now or spread root
...data.ownerData?.details
// Correctly map fields from mockStore structure (flat objects) to form state
builtUpArea: data.propertyData?.totalBuiltUpArea || '',
lotSize: data.propertyData?.lotPlotSize || '', // mockStore might return string "0.22 Acres", assuming input handles text or needs parsing if strictly number
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 || '',
});
setIsEditing(false);
} else if (newLocation) {