From 0bfe25268cc49714669ccb7c8cd16790b7afeb20 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 25 Dec 2025 22:47:39 -0800
Subject: [PATCH] M2: Enhanced empty states with icons, no emojis

---
 frontend/components/profile/user-attendance-list.tsx | 11 +++++++++--
 frontend/components/profile/user-reviews-list.tsx    | 11 ++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/components/profile/user-attendance-list.tsx b/frontend/components/profile/user-attendance-list.tsx
index 73a3d50..c9fc398 100644
--- a/frontend/components/profile/user-attendance-list.tsx
+++ b/frontend/components/profile/user-attendance-list.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
 import { Calendar, MapPin } from "lucide-react"
 import Link from "next/link"
 import { getApiUrl } from "@/lib/api-config"
@@ -26,7 +26,14 @@ export function UserAttendanceList({ userId }: { userId: number }) {
     if (loading) return <div>Loading attendance...</div>
 
     if (shows.length === 0) {
-        return <div className="text-muted-foreground">No shows attended yet.</div>
+        return (
+            <div className="text-center py-12">
+                <Calendar className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
+                <p className="text-muted-foreground font-medium">No shows attended yet</p>
+                <p className="text-sm text-muted-foreground/70 mt-1">Mark shows as attended to track your concert history</p>
+                <Link href="/shows" className="text-primary hover:underline text-sm mt-4 inline-block">Browse shows</Link>
+            </div>
+        )
     }
 
     return (
diff --git a/frontend/components/profile/user-reviews-list.tsx b/frontend/components/profile/user-reviews-list.tsx
index 7e1eddb..1efa7a7 100644
--- a/frontend/components/profile/user-reviews-list.tsx
+++ b/frontend/components/profile/user-reviews-list.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import { ReviewCard } from "@/components/reviews/review-card"
 import { getApiUrl } from "@/lib/api-config"
+import { PenLine } from "lucide-react"
 
 export function UserReviewsList({ userId }: { userId: number }) {
     const [reviews, setReviews] = useState<any[]>([])
@@ -24,7 +25,15 @@ export function UserReviewsList({ userId }: { userId: number }) {
     if (loading) return <div>Loading reviews...</div>
 
     if (reviews.length === 0) {
-        return <div className="text-muted-foreground">No reviews written yet.</div>
+        return (
+            <div className="text-center py-12">
+                <div className="h-12 w-12 rounded-full bg-muted/50 mx-auto mb-4 flex items-center justify-center">
+                    <PenLine className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <p className="text-muted-foreground font-medium">No reviews written yet</p>
+                <p className="text-sm text-muted-foreground/70 mt-1">Share your thoughts on shows you&apos;ve attended</p>
+            </div>
+        )
     }
 
     return (