From ea12c2ec0b128a859a7442f4967137c1ea4a8c3d Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Fri, 20 Feb 2026 21:50:34 +0100
Subject: [PATCH] feat: add coffee image display in subscription items and
 optimize status rendering

---
 src/app/profile/subscriptions/page.tsx | 48 ++++++++++++++++++++------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/app/profile/subscriptions/page.tsx b/src/app/profile/subscriptions/page.tsx
index fd83240..62dca15 100644
--- a/src/app/profile/subscriptions/page.tsx
+++ b/src/app/profile/subscriptions/page.tsx
@@ -91,6 +91,16 @@ export default function ProfileSubscriptionsPage() {
     })
   }, [subscriptions])
 
+  const coffeeImageById = React.useMemo(() => {
+    const map: Record<string, string> = {}
+    coffees.forEach((coffee) => {
+      if (coffee.image) {
+        map[String(coffee.id)] = coffee.image
+      }
+    })
+    return map
+  }, [coffees])
+
   if (!hasHydrated || !isAuthReady || !user) {
     return (
       <div className="min-h-screen flex items-center justify-center">
@@ -271,9 +281,11 @@ export default function ProfileSubscriptionsPage() {
                             }`}
                           >
                             <div className="flex items-start justify-between gap-2">
-                              <p className="text-sm font-semibold text-gray-900 truncate">
-                                {subscription.name || `Subscription #${subscription.id}`}
-                              </p>
+                              <div className="min-w-0">
+                                <p className="text-sm font-semibold text-gray-900 truncate">
+                                  {subscription.name || `Subscription #${subscription.id}`}
+                                </p>
+                              </div>
                               <span
                                 className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${statusBadgeClass(subscriptionStatus)}`}
                               >
@@ -397,13 +409,29 @@ export default function ProfileSubscriptionsPage() {
                       </div>
                     ) : (
                       <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
-                        {includedItems.map((item, index) => (
-                          <div key={`${item.coffeeId || 'coffee'}-${index}`} className="rounded-md bg-white/80 border border-gray-200 p-3">
-                            <p className="text-sm font-semibold text-gray-900">{item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}</p>
-                            <p className="text-xs text-gray-600 mt-1">Coffee ID: {item.coffeeId || '—'}</p>
-                            <p className="text-xs text-gray-600">Packs included: {Number(item.quantity) || 0}</p>
-                          </div>
-                        ))}
+                        {includedItems.map((item, index) => {
+                          const imageUrl = item.coffeeId ? coffeeImageById[String(item.coffeeId)] : ''
+                          return (
+                            <div key={`${item.coffeeId || 'coffee'}-${index}`} className="rounded-md bg-white/80 border border-gray-200 p-3">
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="min-w-0">
+                                  <p className="text-sm font-semibold text-gray-900">{item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}</p>
+                                  <p className="text-xs text-gray-600 mt-1">Coffee ID: {item.coffeeId || '—'}</p>
+                                  <p className="text-xs text-gray-600">Packs included: {Number(item.quantity) || 0}</p>
+                                </div>
+                                {imageUrl ? (
+                                  <img
+                                    src={imageUrl}
+                                    alt={item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}
+                                    className="h-14 w-14 rounded-md object-cover border border-gray-200 shrink-0"
+                                  />
+                                ) : (
+                                  <div className="h-14 w-14 rounded-md bg-gray-100 border border-gray-200 shrink-0" />
+                                )}
+                              </div>
+                            </div>
+                          )
+                        })}
                       </div>
                     )}