feat: Complete venues overhaul

- Fix ratings API to support venue_id and tour_id
- Add migration for new rating columns
- Venues list: search, state filter, sort by name/shows
- Venues detail: show list with dates, venue stats, error handling
- Remove broken EntityRating/SocialWrapper from venue pages

backend/migrations/add_rating_venue_tour.py

@@ -0,0 +1,43 @@
+"""Add venue_id and tour_id columns to rating table"""
+import os
+import sys
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from database import DATABASE_URL
+import psycopg2
+
+def run():
+    conn = psycopg2.connect(DATABASE_URL)
+    cur = conn.cursor()
+    
+    # Add venue_id column
+    try:
+        cur.execute("ALTER TABLE rating ADD COLUMN venue_id INTEGER REFERENCES venue(id)")
+        print("✅ Added venue_id to rating")
+    except Exception as e:
+        if "already exists" in str(e):
+            print("⚠️ venue_id column already exists")
+        else:
+            print(f"❌ Error adding venue_id: {e}")
+        conn.rollback()
+    else:
+        conn.commit()
+    
+    # Add tour_id column
+    try:
+        cur.execute("ALTER TABLE rating ADD COLUMN tour_id INTEGER REFERENCES tour(id)")
+        print("✅ Added tour_id to rating")
+    except Exception as e:
+        if "already exists" in str(e):
+            print("⚠️ tour_id column already exists")
+        else:
+            print(f"❌ Error adding tour_id: {e}")
+        conn.rollback()
+    else:
+        conn.commit()
+    
+    cur.close()
+    conn.close()
+
+if __name__ == "__main__":
+    run()

backend/models.py

@@ -154,6 +154,8 @@ class Rating(SQLModel, table=True):
     show_id: Optional[int] = Field(default=None, foreign_key="show.id")
     song_id: Optional[int] = Field(default=None, foreign_key="song.id")
     performance_id: Optional[int] = Field(default=None, foreign_key="performance.id")
+    venue_id: Optional[int] = Field(default=None, foreign_key="venue.id")
+    tour_id: Optional[int] = Field(default=None, foreign_key="tour.id")
     
     user: "User" = Relationship(back_populates="ratings")
 

backend/routers/social.py

@@ -93,8 +93,12 @@ def create_rating(
         query = query.where(Rating.song_id == rating.song_id)
     elif rating.performance_id:
         query = query.where(Rating.performance_id == rating.performance_id)
+    elif rating.venue_id:
+        query = query.where(Rating.venue_id == rating.venue_id)
+    elif rating.tour_id:
+        query = query.where(Rating.tour_id == rating.tour_id)
     else:
-        raise HTTPException(status_code=400, detail="Must rate a show, song, or performance")
+        raise HTTPException(status_code=400, detail="Must rate a show, song, performance, venue, or tour")
         
     existing_rating = session.exec(query).first()
     if existing_rating:
@@ -117,6 +121,8 @@ def get_average_rating(
     show_id: Optional[int] = None,
     song_id: Optional[int] = None,
     performance_id: Optional[int] = None,
+    venue_id: Optional[int] = None,
+    tour_id: Optional[int] = None,
     session: Session = Depends(get_session)
 ):
     query = select(func.avg(Rating.score))
@@ -126,8 +132,13 @@ def get_average_rating(
         query = query.where(Rating.song_id == song_id)
     elif performance_id:
         query = query.where(Rating.performance_id == performance_id)
+    elif venue_id:
+        query = query.where(Rating.venue_id == venue_id)
+    elif tour_id:
+        query = query.where(Rating.tour_id == tour_id)
     else:
-        raise HTTPException(status_code=400, detail="Must specify show_id, song_id, or performance_id")
+        # Return 0 if no entity specified instead of error (graceful degradation)
+        return 0.0
         
     avg = session.exec(query).first()
     return float(avg) if avg else 0.0

backend/schemas.py

@@ -223,6 +223,8 @@ class RatingBase(SQLModel):
     show_id: Optional[int] = None
     song_id: Optional[int] = None
     performance_id: Optional[int] = None
+    venue_id: Optional[int] = None
+    tour_id: Optional[int] = None
 
 class RatingCreate(RatingBase):
     pass

email/package.json

@@ -18,14 +18,14 @@
     "author": "Elmeg",
     "license": "MIT",
     "dependencies": {
-        "@aws-sdk/client-sesv2": "^3.478.0"
+        "@aws-sdk/client-sesv2": "^3.956.0"
     },
     "devDependencies": {
-        "@types/node": "^20.10.0",
-        "typescript": "^5.3.0",
-        "ts-node": "^10.9.0",
+        "@types/jest": "^29.5.0",
+        "@types/node": "^20.19.27",
         "jest": "^29.7.0",
-        "@types/jest": "^29.5.0"
+        "ts-node": "^10.9.2",
+        "typescript": "^5.9.3"
     },
     "engines": {
         "node": ">=18.0.0"

frontend/app/venues/[id]/page.tsx

@@ -1,126 +1,251 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useParams } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { ArrowLeft, MapPin, Calendar } from "lucide-react"
+import { ArrowLeft, MapPin, Calendar, Music, Star } from "lucide-react"
 import Link from "next/link"
-import { notFound } from "next/navigation"
 import { getApiUrl } from "@/lib/api-config"
-import { CommentSection } from "@/components/social/comment-section"
-import { EntityRating } from "@/components/social/entity-rating"
-import { EntityReviews } from "@/components/reviews/entity-reviews"
-import { SocialWrapper } from "@/components/social/social-wrapper"
 
-async function getVenue(id: string) {
-    try {
-        const res = await fetch(`${getApiUrl()}/venues/${id}`, { cache: 'no-store' })
-        if (!res.ok) return null
-        return res.json()
-    } catch (e) {
-        console.error(e)
-        return null
-    }
+interface Venue {
+    id: number
+    name: string
+    city: string
+    state: string
+    country: string
+    capacity: number | null
+    notes: string | null
 }
 
-async function getVenueShows(id: string) {
-    try {
-        const res = await fetch(`${getApiUrl()}/shows/?venue_id=${id}`, { cache: 'no-store' })
-        if (!res.ok) return []
-        return res.json()
-    } catch (e) {
-        console.error(e)
-        return []
-    }
+interface Show {
+    id: number
+    date: string
+    tour?: { name: string }
+    performances?: any[]
 }
 
-export default async function VenueDetailPage({ params }: { params: Promise<{ id: string }> }) {
-    const { id } = await params
-    const venue = await getVenue(id)
-    const shows = await getVenueShows(id)
+export default function VenueDetailPage() {
+    const params = useParams()
+    const id = params.id as string
 
-    if (!venue) {
-        notFound()
+    const [venue, setVenue] = useState<Venue | null>(null)
+    const [shows, setShows] = useState<Show[]>([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                // Fetch venue
+                const venueRes = await fetch(`${getApiUrl()}/venues/${id}`)
+                if (!venueRes.ok) {
+                    if (venueRes.status === 404) {
+                        setError("Venue not found")
+                    } else {
+                        setError("Failed to load venue")
+                    }
+                    return
+                }
+                const venueData = await venueRes.json()
+                setVenue(venueData)
+
+                // Fetch shows at this venue
+                const showsRes = await fetch(`${getApiUrl()}/shows/?venue_id=${id}&limit=100`)
+                if (showsRes.ok) {
+                    const showsData = await showsRes.json()
+                    // Sort by date descending
+                    showsData.sort((a: Show, b: Show) =>
+                        new Date(b.date).getTime() - new Date(a.date).getTime()
+                    )
+                    setShows(showsData)
+                }
+            } catch (err) {
+                console.error("Error fetching venue:", err)
+                setError("Failed to load venue")
+            } finally {
+                setLoading(false)
+            }
+        }
+        fetchData()
+    }, [id])
+
+    if (loading) {
+        return (
+            <div className="container py-10">
+                <div className="animate-pulse space-y-6">
+                    <div className="h-8 bg-muted rounded w-64" />
+                    <div className="h-4 bg-muted rounded w-48" />
+                    <div className="h-64 bg-muted rounded" />
+                </div>
+            </div>
+        )
+    }
+
+    if (error || !venue) {
+        return (
+            <div className="container py-10">
+                <div className="text-center py-12">
+                    <MapPin className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <h1 className="text-2xl font-bold mb-2">{error || "Venue not found"}</h1>
+                    <Link href="/venues">
+                        <Button variant="outline">
+                            <ArrowLeft className="h-4 w-4 mr-2" />
+                            Back to Venues
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+        )
     }
 
     return (
-        <div className="flex flex-col gap-6">
-            <div className="flex items-center gap-4 justify-between">
-                <div className="flex items-center gap-4">
-                    <Link href="/archive">
+        <div className="container py-10 space-y-8">
+            {/* Header */}
+            <div className="flex items-start gap-4">
+                <Link href="/venues">
                     <Button variant="ghost" size="icon">
                         <ArrowLeft className="h-4 w-4" />
                     </Button>
                 </Link>
-                    <div>
+                <div className="flex-1">
                     <h1 className="text-3xl font-bold tracking-tight">{venue.name}</h1>
-                        <p className="text-muted-foreground flex items-center gap-2">
+                    <p className="text-muted-foreground flex items-center gap-2 mt-1">
                         <MapPin className="h-4 w-4" />
-                            {venue.city}, {venue.state} {venue.country}
+                        {venue.city}{venue.state ? `, ${venue.state}` : ""}, {venue.country}
                     </p>
                 </div>
+                <div className="text-right">
+                    <div className="text-3xl font-bold text-primary">{shows.length}</div>
+                    <div className="text-sm text-muted-foreground">
+                        {shows.length === 1 ? "show" : "shows"}
+                    </div>
                 </div>
-                <SocialWrapper type="ratings">
-                    <EntityRating entityType="venue" entityId={venue.id} />
-                </SocialWrapper>
             </div>
 
-            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
-                <div className="flex flex-col gap-6">
+            <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
+                {/* Shows List */}
                 <Card>
                     <CardHeader>
-                            <CardTitle>Shows at {venue.name}</CardTitle>
+                        <CardTitle className="flex items-center gap-2">
+                            <Calendar className="h-5 w-5" />
+                            Shows at {venue.name}
+                        </CardTitle>
                     </CardHeader>
                     <CardContent>
                         {shows.length > 0 ? (
                             <div className="space-y-2">
-                                    {shows.map((show: any) => (
+                                {shows.map((show) => (
                                     <Link key={show.id} href={`/shows/${show.id}`} className="block group">
-                                            <div className="flex items-center justify-between p-2 rounded-md hover:bg-muted/50 transition-colors">
+                                        <div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border">
                                             <div className="flex items-center gap-3">
                                                 <Calendar className="h-4 w-4 text-muted-foreground" />
-                                                    <span className="font-medium group-hover:underline">
-                                                        {new Date(show.date).toLocaleDateString()}
+                                                <span className="font-medium group-hover:text-primary transition-colors">
+                                                    {new Date(show.date).toLocaleDateString("en-US", {
+                                                        weekday: "short",
+                                                        year: "numeric",
+                                                        month: "short",
+                                                        day: "numeric"
+                                                    })}
                                                 </span>
                                             </div>
+                                            <div className="flex items-center gap-4">
                                                 {show.tour && (
-                                                    <span className="text-xs text-muted-foreground">{show.tour.name}</span>
+                                                    <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                                                        {show.tour.name}
+                                                    </span>
                                                 )}
+                                                {show.performances && show.performances.length > 0 && (
+                                                    <span className="text-xs text-muted-foreground flex items-center gap-1">
+                                                        <Music className="h-3 w-3" />
+                                                        {show.performances.length}
+                                                    </span>
+                                                )}
+                                            </div>
                                         </div>
                                     </Link>
                                 ))}
                             </div>
                         ) : (
-                                <p className="text-muted-foreground text-sm">No shows found for this venue.</p>
+                            <p className="text-muted-foreground text-sm text-center py-8">
+                                No shows recorded at this venue yet.
+                            </p>
                         )}
                     </CardContent>
                 </Card>
 
-                    <SocialWrapper type="comments">
-                        <CommentSection entityType="venue" entityId={venue.id} />
-                    </SocialWrapper>
-
-                    <SocialWrapper type="reviews">
-                        <EntityReviews entityType="venue" entityId={venue.id} />
-                    </SocialWrapper>
-                </div>
-
-                <div className="flex flex-col gap-6">
+                {/* Sidebar */}
+                <div className="space-y-6">
+                    {/* Venue Details */}
                     <Card>
                         <CardHeader>
                             <CardTitle>Venue Details</CardTitle>
                         </CardHeader>
-                        <CardContent className="space-y-2">
+                        <CardContent className="space-y-3">
+                            <div className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">Location</span>
+                                <span className="font-medium text-right">
+                                    {venue.city}{venue.state ? `, ${venue.state}` : ""}
+                                    <br />
+                                    <span className="text-muted-foreground">{venue.country}</span>
+                                </span>
+                            </div>
                             {venue.capacity && (
                                 <div className="flex justify-between text-sm">
                                     <span className="text-muted-foreground">Capacity</span>
                                     <span className="font-medium">{venue.capacity.toLocaleString()}</span>
                                 </div>
                             )}
+                            <div className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">Total Shows</span>
+                                <span className="font-medium">{shows.length}</span>
+                            </div>
+                            {shows.length > 0 && (
+                                <>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-muted-foreground">First Show</span>
+                                        <span className="font-medium">
+                                            {new Date(shows[shows.length - 1].date).toLocaleDateString()}
+                                        </span>
+                                    </div>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-muted-foreground">Last Show</span>
+                                        <span className="font-medium">
+                                            {new Date(shows[0].date).toLocaleDateString()}
+                                        </span>
+                                    </div>
+                                </>
+                            )}
                             {venue.notes && (
-                                <div className="pt-2 border-t mt-2">
+                                <div className="pt-3 border-t mt-3">
                                     <p className="text-sm text-muted-foreground italic">{venue.notes}</p>
                                 </div>
                             )}
                         </CardContent>
                     </Card>
+
+                    {/* Quick Stats */}
+                    {shows.length > 0 && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="text-sm">Quick Stats</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="grid grid-cols-2 gap-4 text-center">
+                                    <div>
+                                        <div className="text-2xl font-bold text-primary">{shows.length}</div>
+                                        <div className="text-xs text-muted-foreground">Shows</div>
+                                    </div>
+                                    <div>
+                                        <div className="text-2xl font-bold">
+                                            {shows.reduce((acc, s) => acc + (s.performances?.length || 0), 0)}
+                                        </div>
+                                        <div className="text-xs text-muted-foreground">Performances</div>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
                 </div>
             </div>
         </div>

frontend/app/venues/page.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState, useMemo } from "react"
 import { getApiUrl } from "@/lib/api-config"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
 import Link from "next/link"
-import { MapPin } from "lucide-react"
+import { MapPin, Search, Calendar, ArrowUpDown } from "lucide-react"
 
 interface Venue {
     id: number
@@ -12,54 +14,203 @@ interface Venue {
     city: string
     state: string
     country: string
+    show_count?: number
 }
 
+type SortOption = "name" | "city" | "shows"
+
 export default function VenuesPage() {
     const [venues, setVenues] = useState<Venue[]>([])
     const [loading, setLoading] = useState(true)
+    const [searchQuery, setSearchQuery] = useState("")
+    const [stateFilter, setStateFilter] = useState<string>("")
+    const [sortBy, setSortBy] = useState<SortOption>("name")
 
     useEffect(() => {
-        fetch(`${getApiUrl()}/venues/?limit=100`)
-            .then(res => res.json())
-            .then(data => {
-                // Sort alphabetically
-                const sorted = data.sort((a: Venue, b: Venue) => a.name.localeCompare(b.name))
-                setVenues(sorted)
+        async function fetchVenues() {
+            try {
+                // Fetch venues
+                const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=500`)
+                const venuesData: Venue[] = await venuesRes.json()
+
+                // Fetch show counts for each venue (batch approach)
+                const showsRes = await fetch(`${getApiUrl()}/shows/?limit=1000`)
+                const showsData = await showsRes.json()
+
+                // Count shows per venue
+                const showCounts: Record<number, number> = {}
+                showsData.forEach((show: any) => {
+                    if (show.venue_id) {
+                        showCounts[show.venue_id] = (showCounts[show.venue_id] || 0) + 1
+                    }
                 })
-            .catch(console.error)
-            .finally(() => setLoading(false))
+
+                // Merge counts into venues
+                const venuesWithCounts = venuesData.map(v => ({
+                    ...v,
+                    show_count: showCounts[v.id] || 0
+                }))
+
+                setVenues(venuesWithCounts)
+            } catch (error) {
+                console.error("Failed to fetch venues:", error)
+            } finally {
+                setLoading(false)
+            }
+        }
+        fetchVenues()
     }, [])
 
-    if (loading) return <div className="container py-10">Loading venues...</div>
+    // Get unique states for filter dropdown
+    const uniqueStates = useMemo(() => {
+        const states = [...new Set(venues.map(v => v.state).filter(Boolean))]
+        return states.sort()
+    }, [venues])
+
+    // Filter and sort venues
+    const filteredVenues = useMemo(() => {
+        let result = venues
+
+        // Search filter
+        if (searchQuery) {
+            const query = searchQuery.toLowerCase()
+            result = result.filter(v =>
+                v.name.toLowerCase().includes(query) ||
+                v.city.toLowerCase().includes(query)
+            )
+        }
+
+        // State filter
+        if (stateFilter) {
+            result = result.filter(v => v.state === stateFilter)
+        }
+
+        // Sort
+        switch (sortBy) {
+            case "name":
+                result = [...result].sort((a, b) => a.name.localeCompare(b.name))
+                break
+            case "city":
+                result = [...result].sort((a, b) => a.city.localeCompare(b.city))
+                break
+            case "shows":
+                result = [...result].sort((a, b) => (b.show_count || 0) - (a.show_count || 0))
+                break
+        }
+
+        return result
+    }, [venues, searchQuery, stateFilter, sortBy])
+
+    if (loading) {
+        return (
+            <div className="container py-10">
+                <div className="animate-pulse space-y-4">
+                    <div className="h-8 bg-muted rounded w-48" />
+                    <div className="h-12 bg-muted rounded" />
+                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                        {[...Array(9)].map((_, i) => (
+                            <div key={i} className="h-32 bg-muted rounded" />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        )
+    }
 
     return (
-        <div className="container py-10 space-y-8">
+        <div className="container py-10 space-y-6">
+            {/* Header */}
             <div className="flex flex-col gap-2">
                 <h1 className="text-3xl font-bold tracking-tight">Venues</h1>
                 <p className="text-muted-foreground">
-                    Explore the iconic venues where the magic happens.
+                    {venues.length} venues where the magic happens
                 </p>
             </div>
 
+            {/* Search & Filters */}
+            <div className="flex flex-col sm:flex-row gap-4">
+                <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                        placeholder="Search venues or cities..."
+                        className="pl-10"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+                </div>
+
+                <select
+                    className="h-10 px-3 rounded-md border bg-background text-sm"
+                    value={stateFilter}
+                    onChange={(e) => setStateFilter(e.target.value)}
+                >
+                    <option value="">All States</option>
+                    {uniqueStates.map(state => (
+                        <option key={state} value={state}>{state}</option>
+                    ))}
+                </select>
+
+                <div className="flex gap-2">
+                    <Button
+                        variant={sortBy === "name" ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => setSortBy("name")}
+                    >
+                        <ArrowUpDown className="h-3 w-3 mr-1" />
+                        Name
+                    </Button>
+                    <Button
+                        variant={sortBy === "shows" ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => setSortBy("shows")}
+                    >
+                        <Calendar className="h-3 w-3 mr-1" />
+                        Shows
+                    </Button>
+                </div>
+            </div>
+
+            {/* Results count */}
+            {(searchQuery || stateFilter) && (
+                <p className="text-sm text-muted-foreground">
+                    Showing {filteredVenues.length} of {venues.length} venues
+                </p>
+            )}
+
+            {/* Venue Grid */}
             <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {venues.map((venue) => (
+                {filteredVenues.map((venue) => (
                     <Link key={venue.id} href={`/venues/${venue.id}`}>
-                        <Card className="h-full hover:bg-accent/50 transition-colors">
-                            <CardHeader>
-                                <CardTitle className="flex items-center gap-2">
-                                    <MapPin className="h-5 w-5 text-green-500" />
-                                    {venue.name}
+                        <Card className="h-full hover:bg-accent/50 transition-colors cursor-pointer group">
+                            <CardHeader className="pb-2">
+                                <CardTitle className="flex items-center gap-2 text-lg group-hover:text-primary transition-colors">
+                                    <MapPin className="h-5 w-5 text-green-500 flex-shrink-0" />
+                                    <span className="truncate">{venue.name}</span>
                                 </CardTitle>
                             </CardHeader>
                             <CardContent>
-                                <p className="text-muted-foreground">
-                                    {venue.city}, {venue.state}
+                                <div className="flex items-center justify-between">
+                                    <p className="text-muted-foreground text-sm">
+                                        {venue.city}{venue.state ? `, ${venue.state}` : ""}
                                     </p>
+                                    {(venue.show_count || 0) > 0 && (
+                                        <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full font-medium">
+                                            {venue.show_count} {venue.show_count === 1 ? "show" : "shows"}
+                                        </span>
+                                    )}
+                                </div>
                             </CardContent>
                         </Card>
                     </Link>
                 ))}
             </div>
+
+            {filteredVenues.length === 0 && (
+                <div className="text-center py-12 text-muted-foreground">
+                    <MapPin className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                    <p>No venues found matching your search.</p>
+                </div>
+            )}
         </div>
     )
 }