From 72b507e434bd0d9332119eed50442466ada89c39 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Tue, 30 Jun 2026 23:58:06 -0500
Subject: [PATCH] fix: handle base64 images and fix amenity icon rendering

- Main images: check for base64 data URLs and render directly
- Thumbnails: same base64 handling for thumbnail strip
- Amenity icons: add null check and use global regex for SVG attrs
- All SVGs now properly sized at 14x14 with navy color
---
 src/app/rooms/page.tsx | 71 +++++++++++++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index 82b433b..a678c47 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -150,7 +150,22 @@ export default function RoomsPage() {
 
   const getPhoto = (room: Room, index: number): string | null => {
     if (!room.photos || room.photos.length === 0) return null;
-    return room.photos[Math.min(index, room.photos.length - 1)] || null;
+    const photo = room.photos[Math.min(index, room.photos.length - 1)];
+    if (!photo) return null;
+    // If it's a URL with id= param, extract id; if it's base64, return as-is
+    if (photo.includes('id=')) {
+      return photo;
+    }
+    return photo;
+  };
+
+  const getPhotoId = (photo: string): number | null => {
+    if (!photo) return null;
+    if (photo.includes('id=')) {
+      const match = photo.match(/id=(\d+)/);
+      return match ? parseInt(match[1]) : null;
+    }
+    return null;
   };
 
   const getActiveIndex = (room: Room): number => {
@@ -317,13 +332,21 @@ export default function RoomsPage() {
               {/* ─── Main Image ─── */}
               <div style={{ position: 'relative', width: '100%', height: '300px' }}>
                 {activeSrc ? (
-                  <OptimizedImage
-                    id={parseInt(activeSrc.split('id=')[1])}
-                    alt={room.name}
-                    size="medium"
-                    lazy={true}
-                    style={{ width: '100%', height: '300px' }}
-                  />
+                  activeSrc.startsWith('data:') ? (
+                    <img
+                      src={activeSrc}
+                      alt={room.name}
+                      style={{ width: '100%', height: '300px', objectFit: 'cover' }}
+                    />
+                  ) : (
+                    <OptimizedImage
+                      id={parseInt(activeSrc.split('id=')[1])}
+                      alt={room.name}
+                      size="medium"
+                      lazy={true}
+                      style={{ width: '100%', height: '300px' }}
+                    />
+                  )
                 ) : (
                   <div style={{ width: '100%', height: '300px', background: '#ddd', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                     No photo
@@ -392,13 +415,21 @@ export default function RoomsPage() {
                         }}
                       >
                         {p ? (
-                          <OptimizedImage
-                            id={parseInt(p.split('id=')[1])}
-                            alt=""
-                            size="thumbnail"
-                            lazy={true}
-                            style={{ width: '100%', height: '100%' }}
-                          />
+                          p.startsWith('data:') ? (
+                            <img
+                              src={p}
+                              alt=""
+                              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                            />
+                          ) : (
+                            <OptimizedImage
+                              id={parseInt(p.split('id=')[1])}
+                              alt=""
+                              size="thumbnail"
+                              lazy={true}
+                              style={{ width: '100%', height: '100%' }}
+                            />
+                          )
                         ) : (
                           <div style={{ width: '100%', height: '100%', background: '#ddd' }} />
                         )}
@@ -432,10 +463,12 @@ export default function RoomsPage() {
                           whiteSpace: 'nowrap',
                         }}
                       >
-                        <span
-                          style={{ display: 'inline-flex', alignItems: 'center', width: '14px', height: '14px' }}
-                          dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/, 'width="14"').replace(/height="[^"]*"/, 'height="14"') }}
-                        />
+                        {amenity.icon_svg ? (
+                          <span
+                            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '14px', height: '14px', color: navy }}
+                            dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/g, 'width="14"').replace(/height="[^"]*"/g, 'height="14"') }}
+                          />
+                        ) : null}
                         <span>{amenity.name}</span>
                       </div>
                     ))}