Add mobile-first business photo upload and map thumbnail support

app/indaba/(ops)/map/page.tsx

@@ -64,7 +64,7 @@ export default async function MapPage() {
       supabase
         .from("businesses")
         .select(
-          "id, name, sector, zone_id, lat, lng, est_monthly_volume, notes, decision_maker_name, decision_maker_title, phone, email, linkedin, key_suppliers, key_customers, pain_points, zimx_fit_score, active, mapped_by, created_at",
+          "id, name, sector, zone_id, lat, lng, est_monthly_volume, notes, decision_maker_name, decision_maker_title, phone, email, linkedin, key_suppliers, key_customers, pain_points, zimx_fit_score, active, mapped_by, created_at, photos",
         ),
       supabase
         .from("supply_chain_links")
@@ -137,6 +137,7 @@ export default async function MapPage() {
     active: Boolean(b.active ?? true),
     mapped_by: b.mapped_by ?? null,
     created_at: String(b.created_at ?? new Date().toISOString()),
+    photos: b.photos ?? [],
   }));
 
   const links: MapLink[] = linkRows.map((link) => {

components/ops/Map/BulawayoMap.tsx

@@ -255,11 +255,13 @@ export default function BulawayoMap({
           b.notes && b.notes.length > 120
             ? `${b.notes.slice(0, 120)}…`
             : b.notes ?? "";
+        const firstPhoto = b.photos?.[0] ?? null;
 
         const popupHtml = `
           <div style="font-size:14px; min-width:200px; line-height:1.4;">
             <div style="font-weight:600; font-size:14px; color:#1B1B1B;">${escapeHtml(b.name)}</div>
             <div style="color:#666; font-size:12px; text-transform:capitalize; margin-top:2px;">${escapeHtml(b.sector)} · ${escapeHtml(zoneName)}</div>
+            ${firstPhoto ? `<img src="${escapeHtml(firstPhoto)}" alt="Business photo" style="margin-top:6px;width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #ddd;" />` : `<div style="margin-top:6px;font-size:12px;color:#666;">📷 Tap to add photo</div>`}
             <div style="color:#1B1B1B; font-size:13px; margin-top:4px;">$${volume.toLocaleString()}/mo</div>
             ${notes ? `<div style="color:#555; font-size:12px; margin-top:4px;">${escapeHtml(notes)}</div>` : ""}
             <div style="display:flex; gap:8px; margin-top:8px;">

components/ops/Map/MapView.tsx

@@ -12,6 +12,7 @@ import Textarea from "@/components/ops/ui/Textarea";
 import Button from "@/components/ops/ui/Button";
 import { useToast } from "@/components/ui/Toast";
 import { opsApiPost } from "@/lib/ops/api-client";
+import { createSupabaseBrowserClient } from "@/lib/supabase/client";
 
 import AddBusinessDialog from "./AddBusinessDialog";
 import LogInteractionModal from "@/components/ops/Interactions/LogInteractionModal";
@@ -66,6 +67,8 @@ export default function MapView({
   const [selected, setSelected] = useState<MapBusiness | null>(null);
   const [movingPinId, setMovingPinId] = useState<string | null>(null);
   const [editing, setEditing] = useState(false);
+  const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
+  const [uploadSuccess, setUploadSuccess] = useState(false);
   const [form, setForm] = useState<Record<string, string>>({});
   const [interactionBusinessId, setInteractionBusinessId] = useState<string | null>(null);
   const [showCandidates, setShowCandidates] = useState(true);
@@ -207,6 +210,50 @@ export default function MapView({
     });
   }
 
+  async function handlePhotoUpload(file: File) {
+    if (!selected || isUploadingPhoto) return;
+    setIsUploadingPhoto(true);
+    const supabase = createSupabaseBrowserClient();
+    const filePath = `${selected.id}/${Date.now()}_${file.name.replace(/\s+/g, "_")}`;
+    const { error: uploadError } = await supabase.storage
+      .from("business-photos")
+      .upload(filePath, file, { upsert: false });
+    if (uploadError) {
+      toast.error("Upload failed. Please try again.");
+      setIsUploadingPhoto(false);
+      return;
+    }
+    const { data } = supabase.storage.from("business-photos").getPublicUrl(filePath);
+    const nextPhotos = [...(selected.photos ?? []), data.publicUrl];
+    const { error: updateError } = await supabase
+      .from("businesses")
+      .update({ photos: nextPhotos })
+      .eq("id", selected.id);
+    if (updateError) {
+      toast.error("Photo uploaded, but saving failed.");
+      setIsUploadingPhoto(false);
+      return;
+    }
+    setItems((prev) => prev.map((b) => (b.id === selected.id ? { ...b, photos: nextPhotos } : b)));
+    setSelected((prev) => (prev ? { ...prev, photos: nextPhotos } : prev));
+    setUploadSuccess(true);
+    window.setTimeout(() => setUploadSuccess(false), 1200);
+    setIsUploadingPhoto(false);
+  }
+
+  async function handleDeletePhoto(photoUrl: string) {
+    if (!selected) return;
+    const nextPhotos = (selected.photos ?? []).filter((url) => url !== photoUrl);
+    const supabase = createSupabaseBrowserClient();
+    const { error } = await supabase.from("businesses").update({ photos: nextPhotos }).eq("id", selected.id);
+    if (error) {
+      toast.error("Could not delete photo.");
+      return;
+    }
+    setItems((prev) => prev.map((b) => (b.id === selected.id ? { ...b, photos: nextPhotos } : b)));
+    setSelected((prev) => (prev ? { ...prev, photos: nextPhotos } : prev));
+  }
+
   return (
     <div className="px-4 py-4 md:px-6 md:py-5">
       <div className="md:hidden">
@@ -373,6 +420,31 @@ export default function MapView({
             ))}
             <Textarea value={form.notes ?? ""} onChange={(e) => setForm((p) => ({ ...p, notes: e.target.value }))} rows={4} />
           </div>
+          <div className="mt-4 rounded border border-line-15 p-3 text-white">
+            <div className="mb-2 text-sm font-semibold">Photos</div>
+            <div className="mb-3 grid grid-cols-3 gap-2">
+              {(selected.photos ?? []).map((photo) => (
+                <div key={photo} className="relative">
+                  <img src={photo} alt="Business" className="h-20 w-full rounded object-cover" />
+                  <button type="button" onClick={() => void handleDeletePhoto(photo)} className="absolute right-1 top-1 h-6 w-6 rounded-full bg-black/70 text-xs text-white">✕</button>
+                </div>
+              ))}
+            </div>
+            <label className="inline-flex min-h-11 cursor-pointer items-center justify-center rounded bg-zimx-gold px-4 py-2 text-sm font-semibold text-black">
+              {isUploadingPhoto ? "Uploading..." : uploadSuccess ? "✓ Uploaded" : "Add photo"}
+              <input
+                type="file"
+                className="hidden"
+                accept="image/*"
+                capture="environment"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (file) void handlePhotoUpload(file);
+                  e.currentTarget.value = "";
+                }}
+              />
+            </label>
+          </div>
           <div className="mt-3 flex gap-2"><Button size="sm" variant="primary" onClick={async () => {
             if (!selected) return;
             const patch = { name: form.name.trim(), sector: form.sector as MapBusiness["sector"], notes: form.notes?.trim() || null, est_monthly_volume: form.est_monthly_volume ? Number(form.est_monthly_volume) : null, zone_id: form.zone_id || null, decision_maker_name: form.decision_maker_name?.trim() || null, decision_maker_title: form.decision_maker_title?.trim() || null, phone: form.phone?.trim() || null, email: form.email?.trim() || null, linkedin: form.linkedin?.trim() || null, key_suppliers: (form.key_suppliers || "").split(",").map((s) => s.trim()).filter(Boolean), key_customers: (form.key_customers || "").split(",").map((s) => s.trim()).filter(Boolean), pain_points: (form.pain_points || "").split(",").map((s) => s.trim()).filter(Boolean), zimx_fit_score: form.zimx_fit_score ? Number(form.zimx_fit_score) : null };

components/ops/Map/types.ts

@@ -21,6 +21,7 @@ export type MapBusiness = {
   active: boolean;
   mapped_by: string | null;
   created_at: string;
+  photos: string[] | null;
 };
 
 export type MapLinkEndpoint = {