Changed Product to Dialog

-Changed response from order-service
-Changed UI in Metal-Front-End servcie

Author: aris-cub

apps/shop/metal-mart-frontend/src/app/globals.css

@@ -109,6 +109,28 @@ a, button {
   opacity: 0.9;
 }
 
+/* Dialog animations */
+@keyframes dialogBackdropIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes dialogPanelIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.animate-dialog-backdrop {
+  animation: dialogBackdropIn 0.2s ease-out forwards;
+}
+.animate-dialog-panel {
+  animation: dialogPanelIn 0.25s ease-out forwards;
+}
+
 /* Decorative wave above footer */
 .footer-wave {
   display: block;

apps/shop/metal-mart-frontend/src/app/page.tsx

@@ -6,6 +6,7 @@ import Header from "@/components/Header";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import NewBadge from "@/components/NewBadge";
 import ProductImage from "@/components/ProductImage";
+import ProductDialog from "@/components/ProductDialog";
 import { getPrimaryImageUrl, type Product } from "@/lib/product";
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
@@ -15,23 +16,24 @@ function ProductTile({
   variant,
   delay = 0,
   elevated = false,
+  onSelect,
 }: {
   product: Product;
   variant: "featured" | "standard" | "wide";
   delay?: number;
-  /** Above mascot on home page so card stays opaque */
   elevated?: boolean;
+  onSelect: (product: Product) => void;
 }) {
-  const href = `/products/${product.id}`;
   const price = `$${(product.price_cents / 100).toFixed(2)}`;
 
   const elevatedClass = elevated ? "relative z-30" : "";
 
   if (variant === "featured") {
     return (
-      <Link
-        href={href}
-        className={`group relative flex h-full min-h-[280px] flex-col overflow-hidden rounded-2xl border border-slate-300 bg-slate-100 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#6a4ff5]/15 hover:border-[#6a4ff5]/30 animate-card-reveal ${elevatedClass}`}
+      <button
+        type="button"
+        onClick={() => onSelect(product)}
+        className={`group relative flex h-full min-h-[280px] w-full flex-col overflow-hidden rounded-2xl border border-slate-300 bg-slate-100 text-left shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#6a4ff5]/15 hover:border-[#6a4ff5]/30 animate-card-reveal ${elevatedClass}`}
         style={{ animationDelay: `${delay}s` }}
       >
         {product.is_new && <NewBadge size="default" />}
@@ -60,15 +62,16 @@ function ProductTile({
             Shop now →
           </span>
         </div>
-      </Link>
+      </button>
     );
   }
 
   if (variant === "wide") {
     return (
-      <Link
-        href={href}
-        className={`group relative flex flex-col overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal sm:flex-row ${elevatedClass}`}
+      <button
+        type="button"
+        onClick={() => onSelect(product)}
+        className={`group relative flex w-full flex-col overflow-hidden rounded-2xl border border-slate-300 bg-white text-left shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal sm:flex-row ${elevatedClass}`}
         style={{ animationDelay: `${delay}s` }}
       >
         {product.is_new && <NewBadge size="default" />}
@@ -98,15 +101,16 @@ function ProductTile({
             </p>
           )}
         </div>
-      </Link>
+      </button>
     );
   }
 
   // standard
   return (
-    <Link
-      href={href}
-      className={`group relative flex flex-col overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal ${elevatedClass}`}
+    <button
+      type="button"
+      onClick={() => onSelect(product)}
+      className={`group relative flex w-full flex-col overflow-hidden rounded-2xl border border-slate-300 bg-white text-left shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal ${elevatedClass}`}
       style={{ animationDelay: `${delay}s` }}
     >
       {product.is_new && <NewBadge size="default" />}
@@ -131,14 +135,15 @@ function ProductTile({
         </h2>
         <p className="mt-1 font-semibold text-[#6a4ff5]">{price}</p>
       </div>
-    </Link>
+    </button>
   );
 }
 
 export default function Home() {
   const [products, setProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
 
   useEffect(() => {
     fetch(`${basePath}/api/products`)
@@ -207,26 +212,26 @@ export default function Home() {
                           : ""
                       }
                     >
-                      <ProductTile product={featured} variant="featured" delay={0} elevated />
+                      <ProductTile product={featured} variant="featured" delay={0} elevated onSelect={setSelectedProduct} />
                     </div>
                   )}
                   {/* Side tiles - products 2 and 3 stacked on the right (or single tile spans 2 rows) */}
                   {rest[0] && (
                     <div
                       className={`md:col-span-2 ${rest[1] ? "md:row-span-1" : "md:row-span-2"}`}
                     >
-                      <ProductTile product={rest[0]} variant="standard" delay={0.06} elevated />
+                      <ProductTile product={rest[0]} variant="standard" delay={0.06} elevated onSelect={setSelectedProduct} />
                     </div>
                   )}
                   {rest[1] && (
                     <div className="md:col-span-2 md:row-span-1">
-                      <ProductTile product={rest[1]} variant="standard" delay={0.12} elevated />
+                      <ProductTile product={rest[1]} variant="standard" delay={0.12} elevated onSelect={setSelectedProduct} />
                     </div>
                   )}
                   {/* Bottom row - product 4 as wide horizontal tile */}
                   {rest[2] && (
                     <div className="md:col-span-4">
-                      <ProductTile product={rest[2]} variant="wide" delay={0.18} elevated />
+                      <ProductTile product={rest[2]} variant="wide" delay={0.18} elevated onSelect={setSelectedProduct} />
                     </div>
                   )}
                   {/* Products 5+ in a grid */}
@@ -239,6 +244,7 @@ export default function Home() {
                           variant="standard"
                           delay={0.24 + i * 0.06}
                           elevated
+                          onSelect={setSelectedProduct}
                         />
                       ))}
                     </div>
@@ -268,6 +274,13 @@ export default function Home() {
           </div>
         </section>
       </main>
+
+      {selectedProduct && (
+        <ProductDialog
+          product={selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+        />
+      )}
     </div>
   );
 }

apps/shop/metal-mart-frontend/src/app/products/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import Header from "@/components/Header";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import NewBadge from "@/components/NewBadge";
 import ProductImage from "@/components/ProductImage";
+import ProductDialog from "@/components/ProductDialog";
 import { getPrimaryImageUrl, type Product } from "@/lib/product";
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
@@ -14,6 +14,7 @@ export default function ProductsPage() {
   const [products, setProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
 
   useEffect(() => {
     fetch(`${basePath}/api/products`)
@@ -56,10 +57,11 @@ export default function ProductsPage() {
           </h1>
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {products.map((p, i) => (
-              <Link
+              <button
                 key={p.id}
-                href={`/products/${p.id}`}
-                className="group relative flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal"
+                type="button"
+                onClick={() => setSelectedProduct(p)}
+                className="group relative flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white text-left shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#6a4ff5]/30 hover:shadow-xl hover:shadow-[#6a4ff5]/10 animate-card-reveal"
                 style={{ animationDelay: `${i * 0.06}s` }}
               >
                 {p.is_new && <NewBadge size="default" />}
@@ -85,11 +87,18 @@ export default function ProductsPage() {
                   <p className="mt-2 text-lg font-semibold text-[#6a4ff5]">${(p.price_cents / 100).toFixed(2)}</p>
                   <p className="mt-auto pt-3 text-xs text-slate-500">In stock: {p.stock}</p>
                 </div>
-              </Link>
+              </button>
             ))}
           </div>
         </div>
       </main>
+
+      {selectedProduct && (
+        <ProductDialog
+          product={selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+        />
+      )}
     </div>
   );
 }