diff --git a/components/ops/Map/MapView.tsx b/components/ops/Map/MapView.tsx index c602a29..a3d2db9 100644 --- a/components/ops/Map/MapView.tsx +++ b/components/ops/Map/MapView.tsx @@ -70,6 +70,23 @@ export default function MapView({ const [isUploadingPhoto, setIsUploadingPhoto] = useState(false); const [uploadSuccess, setUploadSuccess] = useState(false); const [form, setForm] = useState>({}); + + const buildFormFromBusiness = useCallback((business: MapBusiness): Record => ({ + name: business.name ?? "", + sector: business.sector ?? "", + zone_id: business.zone_id ?? "", + decision_maker_name: business.decision_maker_name ?? "", + decision_maker_title: business.decision_maker_title ?? "", + phone: business.phone ?? "", + email: business.email ?? "", + linkedin: business.linkedin ?? "", + est_monthly_volume: business.est_monthly_volume?.toString() ?? "", + zimx_fit_score: business.zimx_fit_score?.toString() ?? "", + key_suppliers: business.key_suppliers?.join(", ") ?? "", + key_customers: business.key_customers?.join(", ") ?? "", + pain_points: business.pain_points?.join(", ") ?? "", + notes: business.notes ?? "", + }), []); const [interactionBusinessId, setInteractionBusinessId] = useState(null); const [showCandidates, setShowCandidates] = useState(true); const [selectedCandidate, setSelectedCandidate] = useState(null); @@ -131,7 +148,8 @@ export default function MapView({ const business = items.find((b) => b.id === businessId) ?? null; setSelected(business); setEditing(false); - }, [items]); + setForm(business ? buildFormFromBusiness(business) : {}); + }, [buildFormFromBusiness, items]); const handleMapClick = useCallback( (coords: { lat: number; lng: number }) => { @@ -422,16 +440,50 @@ export default function MapView({

{editing ? "Edit business" : "Business details"}

- {!editing ? : null} + {!editing ? : null}
{editing ? ( -
- {["name", "sector", "decision_maker_name", "decision_maker_title", "phone", "email", "linkedin", "est_monthly_volume", "zimx_fit_score", "key_suppliers", "key_customers", "pain_points"].map((k) => ( - setForm((p) => ({ ...p, [k]: e.target.value }))} /> +
+ {[ + ["Name", "name"], + ["Sector", "sector"], + ["Decision maker", "decision_maker_name"], + ["Decision maker title", "decision_maker_title"], + ["Phone", "phone"], + ["Email", "email"], + ["LinkedIn", "linkedin"], + ["Est. Monthly Volume", "est_monthly_volume"], + ["ZIMX fit score", "zimx_fit_score"], + ["Key suppliers (comma-separated)", "key_suppliers"], + ["Key customers (comma-separated)", "key_customers"], + ["Pain points (comma-separated)", "pain_points"], + ].map(([label, key]) => ( + ))} -