From 41d6cb8771243684fe2a221fabffe5994c905622 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 2 Oct 2025 15:04:29 +0000
Subject: [PATCH] Fix image display for all entities

---
 .../manufacturers/ManufacturerCard.tsx        | 56 +++++++++++--------
 src/components/operators/OperatorCard.tsx     | 56 +++++++++++--------
 src/components/park-owners/ParkOwnerCard.tsx  | 56 +++++++++++--------
 src/components/parks/ParkCard.tsx             | 12 +++-
 src/components/rides/RideCard.tsx             |  4 +-
 src/pages/DesignerDetail.tsx                  |  8 ++-
 src/pages/ManufacturerDetail.tsx              |  8 ++-
 src/pages/OperatorDetail.tsx                  |  8 ++-
 src/pages/PropertyOwnerDetail.tsx             |  8 ++-
 src/pages/RideDetail.tsx                      |  4 +-
 10 files changed, 141 insertions(+), 79 deletions(-)

diff --git a/src/components/manufacturers/ManufacturerCard.tsx b/src/components/manufacturers/ManufacturerCard.tsx
index 5e5d41ed..c76aee7f 100644
--- a/src/components/manufacturers/ManufacturerCard.tsx
+++ b/src/components/manufacturers/ManufacturerCard.tsx
@@ -40,31 +40,41 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
     >
       {/* Logo/Image Section */}
       <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
-        
-        {/* Company Type Badge */}
-        <div className="absolute top-2 right-2 md:top-3 md:right-3 z-10">
-          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs">
-            {formatCompanyType(company.company_type)}
-          </Badge>
-        </div>
+        {(company.card_image_url || company.card_image_id) ? (
+          <img 
+            src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`} 
+            alt={company.name}
+            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          />
+        ) : (
+          <>
+            <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+            
+            {/* Company Type Badge */}
+            <div className="absolute top-2 right-2 md:top-3 md:right-3 z-10">
+              <Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs">
+                {formatCompanyType(company.company_type)}
+              </Badge>
+            </div>
 
-        {/* Logo Display */}
-        <div className="absolute inset-0 flex items-center justify-center">
-          {company.logo_url ? (
-            <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
-              <img 
-                src={company.logo_url} 
-                alt={`${company.name} logo`}
-                className="w-full h-full object-contain p-2"
-              />
+            {/* Logo Display */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              {company.logo_url ? (
+                <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+                  <img 
+                    src={company.logo_url} 
+                    alt={`${company.name} logo`}
+                    className="w-full h-full object-contain p-2"
+                  />
+                </div>
+              ) : (
+                <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                  {getCompanyIcon(company.company_type)}
+                </div>
+              )}
             </div>
-          ) : (
-            <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
-              {getCompanyIcon(company.company_type)}
-            </div>
-          )}
-        </div>
+          </>
+        )}
       </div>
 
       <CardContent className="p-3 md:p-4 space-y-2 md:space-y-3">
diff --git a/src/components/operators/OperatorCard.tsx b/src/components/operators/OperatorCard.tsx
index 05344120..5a96d15a 100644
--- a/src/components/operators/OperatorCard.tsx
+++ b/src/components/operators/OperatorCard.tsx
@@ -27,31 +27,41 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
     >
       {/* Logo/Image Section */}
       <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
-        
-        {/* Park Operator Badge */}
-        <div className="absolute top-3 right-3 z-10">
-          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
-            Park Operator
-          </Badge>
-        </div>
+        {(company.card_image_url || company.card_image_id) ? (
+          <img 
+            src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`} 
+            alt={company.name}
+            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          />
+        ) : (
+          <>
+            <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+            
+            {/* Park Operator Badge */}
+            <div className="absolute top-3 right-3 z-10">
+              <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
+                Park Operator
+              </Badge>
+            </div>
 
-        {/* Logo Display */}
-        <div className="absolute inset-0 flex items-center justify-center">
-          {company.logo_url ? (
-            <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
-              <img 
-                src={company.logo_url} 
-                alt={`${company.name} logo`}
-                className="w-full h-full object-contain p-2"
-              />
+            {/* Logo Display */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              {company.logo_url ? (
+                <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+                  <img 
+                    src={company.logo_url} 
+                    alt={`${company.name} logo`}
+                    className="w-full h-full object-contain p-2"
+                  />
+                </div>
+              ) : (
+                <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                  {getCompanyIcon()}
+                </div>
+              )}
             </div>
-          ) : (
-            <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
-              {getCompanyIcon()}
-            </div>
-          )}
-        </div>
+          </>
+        )}
       </div>
 
       <CardContent className="p-4 space-y-3">
diff --git a/src/components/park-owners/ParkOwnerCard.tsx b/src/components/park-owners/ParkOwnerCard.tsx
index caf85ab6..0b612438 100644
--- a/src/components/park-owners/ParkOwnerCard.tsx
+++ b/src/components/park-owners/ParkOwnerCard.tsx
@@ -27,31 +27,41 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
     >
       {/* Logo/Image Section */}
       <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
-        
-        {/* Property Owner Badge */}
-        <div className="absolute top-3 right-3 z-10">
-          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
-            Property Owner
-          </Badge>
-        </div>
+        {(company.card_image_url || company.card_image_id) ? (
+          <img 
+            src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`} 
+            alt={company.name}
+            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          />
+        ) : (
+          <>
+            <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+            
+            {/* Property Owner Badge */}
+            <div className="absolute top-3 right-3 z-10">
+              <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
+                Property Owner
+              </Badge>
+            </div>
 
-        {/* Logo Display */}
-        <div className="absolute inset-0 flex items-center justify-center">
-          {company.logo_url ? (
-            <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
-              <img 
-                src={company.logo_url} 
-                alt={`${company.name} logo`}
-                className="w-full h-full object-contain p-2"
-              />
+            {/* Logo Display */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              {company.logo_url ? (
+                <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+                  <img 
+                    src={company.logo_url} 
+                    alt={`${company.name} logo`}
+                    className="w-full h-full object-contain p-2"
+                  />
+                </div>
+              ) : (
+                <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                  {getCompanyIcon()}
+                </div>
+              )}
             </div>
-          ) : (
-            <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
-              {getCompanyIcon()}
-            </div>
-          )}
-        </div>
+          </>
+        )}
       </div>
 
       <CardContent className="p-4 space-y-3">
diff --git a/src/components/parks/ParkCard.tsx b/src/components/parks/ParkCard.tsx
index 87e224c1..7cc4570f 100644
--- a/src/components/parks/ParkCard.tsx
+++ b/src/components/parks/ParkCard.tsx
@@ -46,9 +46,17 @@ export function ParkCard({ park }: ParkCardProps) {
       <div className="relative overflow-hidden">
         {/* Image Placeholder with Gradient */}
         <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
-          {park.card_image_url ? <img src={park.card_image_url} alt={park.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /> : <div className="opacity-50 flex items-center justify-center">
+          {(park.card_image_url || park.card_image_id) ? (
+            <img 
+              src={park.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.card_image_id}/public`} 
+              alt={park.name} 
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 
+            />
+          ) : (
+            <div className="opacity-50 flex items-center justify-center">
               {getParkTypeIcon(park.park_type)}
-            </div>}
+            </div>
+          )}
           
           {/* Gradient Overlay */}
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index 998085f5..431aca00 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -55,9 +55,9 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}
         <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
-          {(ride.card_image_url || ride.image_url) ? (
+          {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
             <img 
-              src={ride.card_image_url || ride.image_url} 
+              src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)} 
               alt={ride.name}
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
             />
diff --git a/src/pages/DesignerDetail.tsx b/src/pages/DesignerDetail.tsx
index 3fae89ed..a1f44798 100644
--- a/src/pages/DesignerDetail.tsx
+++ b/src/pages/DesignerDetail.tsx
@@ -133,7 +133,13 @@ export default function DesignerDetail() {
         {/* Hero Section */}
         <div className="relative mb-8">
           <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {designer.logo_url ? (
+            {(designer.banner_image_url || designer.banner_image_id) ? (
+              <img 
+                src={designer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${designer.banner_image_id}/public`} 
+                alt={designer.name}
+                className="w-full h-full object-cover"
+              />
+            ) : designer.logo_url ? (
               <div className="flex items-center justify-center h-full bg-background/90">
                 <img 
                   src={designer.logo_url} 
diff --git a/src/pages/ManufacturerDetail.tsx b/src/pages/ManufacturerDetail.tsx
index bb48e7c7..18d12b62 100644
--- a/src/pages/ManufacturerDetail.tsx
+++ b/src/pages/ManufacturerDetail.tsx
@@ -135,7 +135,13 @@ export default function ManufacturerDetail() {
         {/* Hero Section */}
         <div className="relative mb-4 md:mb-8">
           <div className="aspect-[16/9] md:aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {manufacturer.logo_url ? (
+            {(manufacturer.banner_image_url || manufacturer.banner_image_id) ? (
+              <img 
+                src={manufacturer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${manufacturer.banner_image_id}/public`} 
+                alt={manufacturer.name}
+                className="w-full h-full object-cover"
+              />
+            ) : manufacturer.logo_url ? (
               <div className="flex items-center justify-center h-full bg-background/90">
                 <img 
                   src={manufacturer.logo_url} 
diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index 9b82afe4..203cd054 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -133,7 +133,13 @@ export default function OperatorDetail() {
         {/* Hero Section */}
         <div className="relative mb-8">
           <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {operator.logo_url ? (
+            {(operator.banner_image_url || operator.banner_image_id) ? (
+              <img 
+                src={operator.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${operator.banner_image_id}/public`} 
+                alt={operator.name}
+                className="w-full h-full object-cover"
+              />
+            ) : operator.logo_url ? (
               <div className="flex items-center justify-center h-full bg-background/90">
                 <img 
                   src={operator.logo_url} 
diff --git a/src/pages/PropertyOwnerDetail.tsx b/src/pages/PropertyOwnerDetail.tsx
index 7f2b9926..e116d90c 100644
--- a/src/pages/PropertyOwnerDetail.tsx
+++ b/src/pages/PropertyOwnerDetail.tsx
@@ -133,7 +133,13 @@ export default function PropertyOwnerDetail() {
         {/* Hero Section */}
         <div className="relative mb-8">
           <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {owner.logo_url ? (
+            {(owner.banner_image_url || owner.banner_image_id) ? (
+              <img 
+                src={owner.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${owner.banner_image_id}/public`} 
+                alt={owner.name}
+                className="w-full h-full object-cover"
+              />
+            ) : owner.logo_url ? (
               <div className="flex items-center justify-center h-full bg-background/90">
                 <img 
                   src={owner.logo_url} 
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index 62341c56..d9c417b5 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -217,9 +217,9 @@ export default function RideDetail() {
         {/* Hero Section */}
         <div className="relative mb-8">
           <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {(ride.banner_image_url || ride.card_image_url || ride.image_url) ? (
+            {(ride.banner_image_url || ride.banner_image_id) ? (
               <img 
-                src={ride.banner_image_url || ride.card_image_url || ride.image_url} 
+                src={ride.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.banner_image_id}/public`} 
                 alt={ride.name}
                 className="w-full h-full object-cover"
               />