added image preview + zoom in out in DeveloperDetails +edit profile

Ansh-2222 · Ansh-2222 · commit 458232f4b7e8 · 2025-12-01T23:14:37.000+05:30
diff --git a/src/pages/categories/ArchitectDetail.tsx b/src/pages/categories/ArchitectDetail.tsx
@@ -140,14 +140,15 @@ export default function ArchitectDetail() {
       }
 
       // Generate fresh, non-cached URLs
-      const urls = data.map((file) => {
-        const { data: publicUrl } = supabase.storage
-          .from("Architects")
-          .getPublicUrl(`${folderName}/${file.name}`);
-
-        // prevent browser and CDN caching old files
-        return `${publicUrl.publicUrl}?v=${Date.now()}`;
-      });
+      const urls = data
+  .filter((file) => !file.name.startsWith("profile_")) // 🚫 Exclude profile images
+  .map((file) => {
+    const { data: publicUrl } = supabase.storage
+      .from("Architects")
+      .getPublicUrl(`${folderName}/${file.name}`);
+
+    return `${publicUrl.publicUrl}?v=${Date.now()}`;
+  });
 
       setPhotos(urls);
     } catch (err) {
diff --git a/src/pages/categories/ContractorDetail.tsx b/src/pages/categories/ContractorDetail.tsx
@@ -5,6 +5,8 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Loader2, Upload, X } from "lucide-react";
 import { motion } from "framer-motion";
+import ImageViewer from "@/components/ImageViewer";
+
 
 export default function ContractorDetail() {
   const { id } = useParams<{ id: string }>();
@@ -30,6 +32,13 @@ export default function ContractorDetail() {
   const [message, setMessage] = useState("");
   const [date, setDate] = useState("");
 
+  // image viewer states
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+
+
+
   // Load logged-in user
   useEffect(() => {
     supabase.auth.getUser().then(({ data }) => setCurrentUser(data.user));
@@ -64,10 +73,11 @@ export default function ContractorDetail() {
     const { data } = await supabase.storage.from("contractor").list(folder);
 
     const urls =
-      data?.map((file) => {
-        return supabase.storage.from("contractor").getPublicUrl(`${folder}/${file.name}`)
-          .data.publicUrl;
-      }) || [];
+  data
+    ?.filter((file) => !file.name.startsWith("profile_")) // 🚫 exclude profile photos
+    .map((file) =>
+      supabase.storage.from("contractor").getPublicUrl(`${folder}/${file.name}`).data.publicUrl
+    ) || [];
 
     setPhotos(urls);
   };
@@ -78,39 +88,81 @@ export default function ContractorDetail() {
 
   // Upload photo
   const handleUpload = async (e: any) => {
-  if (!canUpload) return alert("Only the contractor can upload images.");
+    if (!canUpload) return alert("Only the contractor can upload images.");
+
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+
+    try {
+      const folder = `contractor_${id}`;
+      const filePath = `${folder}/${Date.now()}_${file.name}`;
+
+      const { error } = await supabase.storage
+        .from("contractor")  // your bucket name
+        .upload(filePath, file);
+
+      if (error) {
+        console.error(error);
+        alert("Upload failed. Check console.");
+        return;
+      }
+
+      // Get public URL
+      const { data: publicData } = supabase.storage``
+        .from("contractor")
+        .getPublicUrl(filePath);
+
+      setPhotos((prev) => [...prev, publicData.publicUrl]); // update UI immediately
+      alert("Photo uploaded successfully!");
+    } finally {
+      setUploading(false);
+    }
+  };
 
+  const handleProfilePhotoUpdate = async (e: React.ChangeEvent<HTMLInputElement>) => {
   const file = e.target.files?.[0];
-  if (!file) return;
+  if (!file || !id) return;
 
   setUploading(true);
 
   try {
-    const folder = `contractor_${id}`;
-    const filePath = `${folder}/${Date.now()}_${file.name}`;
+    const fileExt = file.name.split(".").pop();
+    const fileName = `profile_${Date.now()}.${fileExt}`;
+    const filePath = `contractor_${id}/${fileName}`;
 
-    const { error } = await supabase.storage
-      .from("contractor")  // your bucket name
-      .upload(filePath, file);
+    const { error: uploadError } = await supabase.storage
+      .from("contractor")
+      .upload(filePath, file, { upsert: true });
 
-    if (error) {
-      console.error(error);
-      alert("Upload failed. Check console.");
+    if (uploadError) {
+      alert("Error updating profile photo");
       return;
     }
 
-    // Get public URL
-    const { data: publicData } = supabase.storage ``
-      .from("contractor")
-      .getPublicUrl(filePath);
+    const { data: publicUrl } = supabase.storage.from("contractor").getPublicUrl(filePath);
+
+    if (!publicUrl?.publicUrl) return;
+
+    const { error: dbError } = await supabase
+      .from("contractors_register")
+      .update({ image_url: publicUrl.publicUrl })
+      .eq("id", Number(id));
+
+    if (dbError) {
+      alert("Failed to update profile photo.");
+      return;
+    }
 
-    setPhotos((prev) => [...prev, publicData.publicUrl]); // update UI immediately
-    alert("Photo uploaded successfully!");
+    setContractor((prev: any) => ({ ...prev, image_url: publicUrl.publicUrl }));
+    alert("Profile photo updated!");
   } finally {
     setUploading(false);
   }
 };
 
+
   // 📌 New insert logic using `contractor_request`
   const handleRequest = async () => {
     if (!clientName || !phone || !projectType || !location) {
@@ -172,6 +224,17 @@ export default function ContractorDetail() {
   return (
     <div className="bg-white min-h-screen">
       <Navbar />
+      {/* Image Viewer Modal */}
+      {viewerOpen && (
+        <ImageViewer
+          photos={photos}
+          currentIndex={currentIndex}
+          setCurrentIndex={setCurrentIndex}
+          onClose={() => setViewerOpen(false)}
+          canDelete={false}
+          onDelete={() => { }}
+        />
+      )}
 
       {/* Banner */}
       <div className="w-full h-72 md:h-96 bg-gray-200 relative overflow-hidden">
@@ -185,10 +248,32 @@ export default function ContractorDetail() {
       {/* Profile Card */}
       <div className="max-w-6xl mx-auto p-6 bg-white shadow-xl rounded-2xl -mt-32 md:-mt-24 relative z-10">
         <div className="flex flex-col md:flex-row gap-6 items-start">
-          <img
-            src={contractor.image_url || "/placeholder-user.jpg"}
-            className="w-40 h-40 rounded-xl object-cover border-4 border-white shadow-lg"
-          />
+          <div className="relative group w-40 h-40">
+  <img
+    src={contractor.image_url || "/placeholder-user.jpg"}
+    className="w-full h-full rounded-xl object-cover border-4 border-white shadow-lg"
+  />
+
+  {canUpload && (
+    <>
+      <label
+        htmlFor="profileImageUpload"
+        className="absolute inset-0 bg-black/50 text-white text-sm flex items-center justify-center opacity-0 group-hover:opacity-100 cursor-pointer rounded-xl transition"
+      >
+        Edit Photo
+      </label>
+
+      <input
+        type="file"
+        id="profileImageUpload"
+        className="hidden"
+        accept="image/*"
+        onChange={handleProfilePhotoUpdate}
+      />
+    </>
+  )}
+</div>
+
 
           <div>
             <h1 className="text-3xl font-bold text-yellow-700">{contractor.name}</h1>
@@ -244,7 +329,17 @@ export default function ContractorDetail() {
         ) : (
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
             {photos.map((url, i) => (
-              <motion.img key={i} src={url} className="rounded-lg object-cover h-40 w-full" whileHover={{ scale: 1.05 }} />
+              <motion.img
+                key={i}
+                src={url}
+                className="rounded-lg object-cover h-40 w-full cursor-pointer"
+                whileHover={{ scale: 1.05 }}
+                onClick={() => {
+                  setCurrentIndex(i);
+                  setViewerOpen(true);
+                }}
+              />
+
             ))}
           </div>
         )}
diff --git a/src/pages/categories/DeveloperDetail.tsx b/src/pages/categories/DeveloperDetail.tsx
@@ -149,35 +149,35 @@ export default function DeveloperDetail() {
   };
 
 
-const submitRequest = async () => {
-  if (!currentUser) {
-    alert("Please login first!");
-    return;
-  }
-
-  const { error } = await supabase.from("Developer_Request").insert([
-    {
-      name: formData.name,
-      email: currentUser.email,             
-      phone_number: formData.phone,
-      company: "-",                         
-      project_type: formData.project_type,
-      location: formData.location,
-      estimated_budget: formData.budget,
-      details: formData.message,
-      const_id: developer.id,               
-    },
-  ]);
-
-  if (error) {
-    console.log(error);
-    alert("Request failed!");
-    return;
-  }
-
-  alert("Request sent successfully!");
-  setShowRequestModal(false);
-};
+  const submitRequest = async () => {
+    if (!currentUser) {
+      alert("Please login first!");
+      return;
+    }
+
+    const { error } = await supabase.from("Developer_Request").insert([
+      {
+        name: formData.name,
+        email: currentUser.email,
+        phone_number: formData.phone,
+        company: "-",
+        project_type: formData.project_type,
+        location: formData.location,
+        estimated_budget: formData.budget,
+        details: formData.message,
+        const_id: developer.id,
+      },
+    ]);
+
+    if (error) {
+      console.log(error);
+      alert("Request failed!");
+      return;
+    }
+
+    alert("Request sent successfully!");
+    setShowRequestModal(false);
+  };
 
 
   if (loading)
@@ -191,6 +191,8 @@ const submitRequest = async () => {
     <div className="bg-white min-h-screen">
       <Navbar />
 
+
+
       {/* DONE BUTTON */}
       {canEdit && (
         <div className="w-full flex justify-end px-6 mt-3">
@@ -268,10 +270,14 @@ const submitRequest = async () => {
             {photos.map((photo) => (
               <div key={photo.path} className="relative group">
                 <motion.img
-                  src={photo.url}
-                  className="rounded-lg object-cover h-40 w-full"
-                  whileHover={{ scale: 1.05 }}
-                />
+  src={photo.url}
+  className="rounded-lg object-cover h-40 w-full cursor-pointer"
+  whileHover={{ scale: 1.05 }}
+  onClick={() => {
+    setCurrentIndex(photos.findIndex((p) => p.url === photo.url));
+    setViewerOpen(true);
+  }}
+/>
 
                 {canEdit && (
                   <button
@@ -313,8 +319,8 @@ const submitRequest = async () => {
                     key === "project_type"
                       ? "Project Type (Home, Office)"
                       : key === "message"
-                      ? "Message (optional)"
-                      : key
+                        ? "Message (optional)"
+                        : key
                           .replace("_", " ")
                           .replace(/\b\w/g, (l) => l.toUpperCase())
                   }
