From 49e3d73c67b7e7b05de4c8888891df0de7c710fa Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Wed, 29 Apr 2026 20:20:01 -0400
Subject: [PATCH] Add click-to-enlarge lightbox for inventory product image

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Views/Inventory/Details.cshtml            | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/PowderCoating.Web/Views/Inventory/Details.cshtml b/src/PowderCoating.Web/Views/Inventory/Details.cshtml
index a6898f7..b59df53 100644
--- a/src/PowderCoating.Web/Views/Inventory/Details.cshtml
+++ b/src/PowderCoating.Web/Views/Inventory/Details.cshtml
@@ -312,8 +312,24 @@
                 {
                     <div class="card border-0 shadow-sm mb-4">
                         <div class="card-body p-3 text-center">
-                            <img src="@Model.ImageUrl" alt="@Model.Name"
-                                 style="max-width:100%;max-height:200px;object-fit:contain;" />
+                            <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal" title="Click to enlarge" style="cursor:zoom-in;">
+                                <img src="@Model.ImageUrl" alt="@Model.Name"
+                                     style="max-width:100%;max-height:200px;object-fit:contain;" />
+                            </a>
+                            <div class="text-muted small mt-1"><i class="bi bi-zoom-in me-1"></i>Click to enlarge</div>
+                        </div>
+                    </div>
+
+                    <!-- Image Lightbox Modal -->
+                    <div class="modal fade" id="imageModal" tabindex="-1" aria-label="Product image">
+                        <div class="modal-dialog modal-lg modal-dialog-centered">
+                            <div class="modal-content border-0 bg-transparent shadow-none">
+                                <div class="modal-body p-0 text-center position-relative">
+                                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
+                                    <img src="@Model.ImageUrl" alt="@Model.Name"
+                                         style="max-width:100%;max-height:85vh;object-fit:contain;border-radius:6px;" />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 }