feat: add subscriptions display to profile page with loading and error handling

src/app/profile/page.tsx

@@ -13,6 +13,7 @@ import EditModal from './components/editModal'
 import { getProfileCompletion } from './hooks/getProfileCompletion'
 import { useProfileData } from './hooks/getProfileData'
 import { useMedia } from './hooks/getMedia'
+import { useMyAbonements } from './hooks/getAbo'
 import { editProfileBasic } from './hooks/editProfile'
 import { authFetch } from '../utils/authFetch'
 
@@ -105,6 +106,7 @@ export default function ProfilePage() {
   // Fetch hooks can run with undefined userId; they should handle it internally
   const { data: profileDataApi, loading: profileLoading } = useProfileData(userId, refreshKey)
   const { data: mediaData, loading: mediaLoading } = useMedia(userId, refreshKey)
+  const { data: subscriptions, loading: subscriptionsLoading, error: subscriptionsError } = useMyAbonements(refreshKey)
 
   // Redirect only after hydration + auth ready
   useEffect(() => {
@@ -407,6 +409,38 @@ export default function ProfilePage() {
                       Open subscriptions
                     </button>
                   </div>
+
+                  <div className="mt-4 rounded-md border border-white/60 bg-white/70 p-3">
+                    {subscriptionsLoading ? (
+                      <p className="text-sm text-gray-600">Loading subscriptions…</p>
+                    ) : subscriptionsError ? (
+                      <p className="text-sm text-red-700">{subscriptionsError}</p>
+                    ) : subscriptions.length === 0 ? (
+                      <p className="text-sm text-gray-600">You don’t have any subscriptions yet.</p>
+                    ) : (
+                      <ul className="space-y-2">
+                        {subscriptions.map((subscription) => {
+                          const packs = (subscription.pack_breakdown || subscription.items || []).reduce(
+                            (sum, item) => sum + (Number(item.quantity) || 0),
+                            0,
+                          )
+                          const started = subscription.startedAt || subscription.createdAt
+                          const startedLabel = started ? new Date(started).toLocaleDateString('de-DE') : '—'
+                          return (
+                            <li key={subscription.id} className="flex items-center justify-between gap-3 text-sm border-b border-gray-200/60 pb-2 last:border-0 last:pb-0">
+                              <div className="min-w-0">
+                                <p className="font-medium text-gray-900 truncate">{subscription.name || `Subscription #${subscription.id}`}</p>
+                                <p className="text-xs text-gray-600">Started: {startedLabel} • Packs: {packs}</p>
+                              </div>
+                              <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+                                {String(subscription.status || 'ongoing')}
+                              </span>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    )}
+                  </div>
                 </section>
                 {/* --- Edit Bank Information Section --- */}
                 <BankInformation