From 43803ee53c0edc60c3de7576c386fc838989089c Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Sun, 1 Feb 2026 19:40:33 +0530
Subject: [PATCH] feat: updated Not Interested visuals to white and added
 Renovated status option

---
 src/pages/Maps.jsx | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/pages/Maps.jsx b/src/pages/Maps.jsx
index 0c21f68..e8073da 100644
--- a/src/pages/Maps.jsx
+++ b/src/pages/Maps.jsx
@@ -32,7 +32,7 @@ const StatusBadge = ({ status }) => {
         "Hot Lead": "bg-red-500",
         "Renovated": "bg-blue-500",
         "Customer": "bg-emerald-500",
-        "Not Interested": "bg-black"
+        "Not Interested": "bg-white border border-zinc-200 text-zinc-900 shadow-sm"
     };
     return (
         <span className={`px-2 py-1 rounded text-[10px] uppercase font-bold text-white shadow-sm ${colors[status] || "bg-zinc-400"}`}>
@@ -72,7 +72,7 @@ const MapLegend = () => (
                 <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>
+                <div className="w-3 h-3 rounded-full bg-white border-2 border-zinc-300 dark:border-zinc-500 shadow-sm"></div>
                 <span className="text-xs font-bold text-zinc-700 dark:text-zinc-300">Not Interested</span>
             </div>
         </div>
@@ -121,8 +121,8 @@ const MapView = ({ data, onSelect, onMapCreate }) => {
                         color = "#3b82f6"; // Blue-500
                         break;
                     case "Not Interested":
-                        color = "#18181b"; // Zinc-900 (Blackish)
-                        fillOpacity = 0.1;
+                        color = "#ffffff"; // Bright White
+                        fillOpacity = 0.4; // Higher opacity for white visibility
                         break;
                     default:
                         // Neutral (Violet)
@@ -152,6 +152,26 @@ const MapView = ({ data, onSelect, onMapCreate }) => {
     );
 };
 
+const RenderInput = ({ label, field, type = "text", placeholder, options, min, max }) => {
+    // ... helper logic ...
+    return (
+        <div className="flex flex-col space-y-1">
+            {/* ... */}
+        </div>
+    )
+}
+
+// ... (skipping to Drawer content) ...
+// Assuming the Drawer section is below lines 300
+// I will target the specific Status Select input lower down in a separate replacement if I can't catch it here.
+// Wait, the instruction asked to do it all. The previous `view_file` didn't show the `Drawer` render part fully recently.
+// I'll stick to updating Legend and MapView first here as they are contiguous. I will do the Dropdown and Badge in a second pass if not safely accessible in this chunk range.
+// Actually, I can probably safely target just the Legend and MapView here as per the `StartLine`/`EndLine`.
+// The Drawer render for `status` options is likely further down.
+
+// Let's split this. First Edit: Legend and MapView Colors.
+
+
 const Drawer = ({ isOpen, onClose, data, newLocation, onUpdateStatus, onSave, loadingAddr }) => {
     const [isEditing, setIsEditing] = useState(false);
 
@@ -355,8 +375,8 @@ const Drawer = ({ isOpen, onClose, data, newLocation, onUpdateStatus, onSave, lo
                             {isEditing && (
                                 <div className="space-y-2">
                                     <label className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest ml-1">Canvassing Status</label>
-                                    <div className="grid grid-cols-4 gap-2">
-                                        {["Neutral", "Hot Lead", "Customer", "Not Interested"].map(s => (
+                                    <div className="grid grid-cols-3 gap-2">
+                                        {["Neutral", "Hot Lead", "Renovated", "Customer", "Not Interested"].map(s => (
                                             <button key={s} onClick={() => setFormData({ ...formData, status: s })} className={`px-1 py-2 rounded text-[10px] font-bold border transition-all ${formData.status === s ? 'bg-zinc-900 dark:bg-white text-white dark:text-black' : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500'}`}>{s}</button>
                                         ))}
                                     </div>