Refactor: Enhance homepage tab styling

src/components/homepage/ContentTabs.tsx

@@ -4,17 +4,32 @@ import { ParkCard } from '@/components/parks/ParkCard';
 import { RideCard } from '@/components/rides/RideCard';
 import { RecentChangeCard } from './RecentChangeCard';
 import { Badge } from '@/components/ui/badge';
-import { Park, Ride, ActivityEntry } from '@/types/database';
+import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
+import { Clock } from 'lucide-react';
+
+interface RecentChange {
+  entityType: 'park' | 'ride' | 'company';
+  entityId: string;
+  entityName: string;
+  entitySlug: string;
+  parkSlug?: string;
+  imageUrl: string | null;
+  changeType: string;
+  changedAt: string;
+  changedByUsername?: string | null;
+  changedByAvatar?: string | null;
+  changeReason: string | null;
+}
 
 export function ContentTabs() {
   const [trendingParks, setTrendingParks] = useState<Park[]>([]);
   const [trendingRides, setTrendingRides] = useState<Ride[]>([]);
   const [recentParks, setRecentParks] = useState<Park[]>([]);
   const [recentRides, setRecentRides] = useState<Ride[]>([]);
-  const [recentChanges, setRecentChanges] = useState<ActivityEntry[]>([]);
+  const [recentChanges, setRecentChanges] = useState<RecentChange[]>([]);
   const [recentlyOpened, setRecentlyOpened] = useState<Array<(Park | Ride) & { entityType: 'park' | 'ride' }>>([]);
   const [loading, setLoading] = useState(true);
 
@@ -52,11 +67,122 @@ export function ContentTabs() {
         .order('created_at', { ascending: false })
         .limit(12);
 
-      // Recent changes will be populated from other sources since entity_versions requires auth
+      // Fetch recent park versions
-      const changesData: ActivityEntry[] = [];
+      const { data: parkVersions } = await supabase
+        .from('park_versions')
+        .select(`
+          version_id,
+          park_id,
+          name,
+          slug,
+          change_type,
+          created_at,
+          created_by,
+          change_reason,
+          card_image_url,
+          profiles:profiles!park_versions_created_by_fkey(username, avatar_url)
+        `)
+        .eq('is_current', true)
+        .order('created_at', { ascending: false })
+        .limit(12);
 
-      // Process changes to extract entity info from version_data
+      // Fetch recent ride versions with park slug for proper routing
-      const processedChanges: ActivityEntry[] = [];
+      const { data: rideVersions } = await supabase
+        .from('ride_versions')
+        .select(`
+          version_id,
+          ride_id,
+          name,
+          slug,
+          change_type,
+          created_at,
+          created_by,
+          change_reason,
+          card_image_url,
+          park_id,
+          profiles:profiles!ride_versions_created_by_fkey(username, avatar_url)
+        `)
+        .eq('is_current', true)
+        .order('created_at', { ascending: false })
+        .limit(12);
+
+      // Fetch park slugs for rides that have a park_id
+      const rideParksMap = new Map<string, string>();
+      if (rideVersions) {
+        const parkIds = [...new Set(rideVersions.map(v => v.park_id).filter(Boolean))];
+        if (parkIds.length > 0) {
+          const { data: parks } = await supabase
+            .from('parks')
+            .select('id, slug')
+            .in('id', parkIds);
+          
+          parks?.forEach(park => {
+            rideParksMap.set(park.id, park.slug);
+          });
+        }
+      }
+
+      // Fetch recent company versions
+      const { data: companyVersions } = await supabase
+        .from('company_versions')
+        .select(`
+          version_id,
+          company_id,
+          name,
+          slug,
+          change_type,
+          created_at,
+          created_by,
+          change_reason,
+          card_image_url,
+          profiles:profiles!company_versions_created_by_fkey(username, avatar_url)
+        `)
+        .eq('is_current', true)
+        .order('created_at', { ascending: false })
+        .limit(12);
+
+      // Combine all changes into a unified structure
+      const allChanges: RecentChange[] = [
+        ...(parkVersions || []).map(v => ({
+          entityType: 'park' as const,
+          entityId: v.park_id,
+          entityName: v.name,
+          entitySlug: v.slug,
+          imageUrl: v.card_image_url,
+          changeType: v.change_type,
+          changedAt: v.created_at,
+          changedByUsername: v.profiles?.username,
+          changedByAvatar: v.profiles?.avatar_url,
+          changeReason: v.change_reason,
+        })),
+        ...(rideVersions || []).map(v => ({
+          entityType: 'ride' as const,
+          entityId: v.ride_id,
+          entityName: v.name,
+          entitySlug: v.slug,
+          parkSlug: v.park_id ? rideParksMap.get(v.park_id) : undefined,
+          imageUrl: v.card_image_url,
+          changeType: v.change_type,
+          changedAt: v.created_at,
+          changedByUsername: v.profiles?.username,
+          changedByAvatar: v.profiles?.avatar_url,
+          changeReason: v.change_reason,
+        })),
+        ...(companyVersions || []).map(v => ({
+          entityType: 'company' as const,
+          entityId: v.company_id,
+          entityName: v.name,
+          entitySlug: v.slug,
+          imageUrl: v.card_image_url,
+          changeType: v.change_type,
+          changedAt: v.created_at,
+          changedByUsername: v.profiles?.username,
+          changedByAvatar: v.profiles?.avatar_url,
+          changeReason: v.change_reason,
+        }))
+      ]
+        .sort((a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime())
+        .slice(0, 24);
 
       // Fetch recently opened parks and rides
       const oneYearAgo = new Date();
@@ -91,7 +217,7 @@ export function ContentTabs() {
       setRecentParks(recent || []);
       setTrendingRides(trendingRidesData || []);
       setRecentRides(recentRidesData || []);
-      setRecentChanges(processedChanges);
+      setRecentChanges(allChanges);
       setRecentlyOpened(combinedOpened);
     } catch (error: unknown) {
       logger.error('Failed to fetch content', { error: getErrorMessage(error) });
@@ -105,11 +231,22 @@ export function ContentTabs() {
     return (
       <section className="py-12">
         <div className="container mx-auto px-4">
-          <div className="animate-pulse space-y-6">
+          <div className="space-y-8">
-            <div className="h-12 bg-muted rounded w-1/3 mx-auto"></div>
+            <div className="text-center space-y-3">
-            <div className="grid md:grid-cols-3 gap-6">
+              <div className="h-8 bg-gradient-to-r from-primary/20 via-secondary/20 to-accent/20 rounded-lg w-64 mx-auto animate-pulse" />
-              {[...Array(6)].map((_, i) => (
+              <div className="h-4 bg-muted/50 rounded w-96 mx-auto animate-pulse" style={{ animationDelay: '150ms' }} />
-                <div key={i} className="h-64 bg-muted rounded-lg"></div>
+              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
+            </div>
+            
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+              {[...Array(12)].map((_, i) => (
+                <div 
+                  key={i} 
+                  className="h-72 bg-gradient-to-br from-card via-card to-card/80 rounded-lg border border-border/50 animate-pulse relative overflow-hidden"
+                  style={{ animationDelay: `${i * 50}ms` }}
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-shimmer" />
+                </div>
               ))}
             </div>
           </div>
@@ -124,22 +261,22 @@ export function ContentTabs() {
         <Tabs defaultValue="trending-parks" className="w-full">
           <div className="text-center mb-8">
             <TabsList className="grid w-full max-w-5xl mx-auto grid-cols-3 md:grid-cols-6 h-auto p-2 bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 dark:from-primary/20 dark:via-secondary/20 dark:to-accent/20 dark:bg-card/50 border border-primary/20 dark:border-primary/30 rounded-xl shadow-lg backdrop-blur-sm">
-              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Trending Parks
               </TabsTrigger>
-              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Trending Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 New Parks
               </TabsTrigger>
-              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 New Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-changes" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-changes" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Recent Changes
               </TabsTrigger>
-              <TabsTrigger value="recently-opened" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recently-opened" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Recently Opened
               </TabsTrigger>
             </TabsList>
@@ -147,8 +284,9 @@ export function ContentTabs() {
 
       <TabsContent value="trending-parks" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Parks</h2>
-          <p className="text-muted-foreground">Most viewed parks in the last 30 days</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed parks in the last 30 days</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {trendingParks.map((park) => (
@@ -159,8 +297,9 @@ export function ContentTabs() {
 
       <TabsContent value="trending-rides" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Rides</h2>
-          <p className="text-muted-foreground">Most viewed rides in the last 30 days</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed rides in the last 30 days</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {trendingRides.map((ride) => (
@@ -171,8 +310,9 @@ export function ContentTabs() {
 
       <TabsContent value="recent-parks" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Parks</h2>
-          <p className="text-muted-foreground">Latest parks added to our database</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest parks added to our database</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentParks.map((park) => (
@@ -183,8 +323,9 @@ export function ContentTabs() {
 
       <TabsContent value="recent-rides" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Rides</h2>
-          <p className="text-muted-foreground">Latest attractions added to our database</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest attractions added to our database</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentRides.map((ride) => (
@@ -195,18 +336,51 @@ export function ContentTabs() {
 
       <TabsContent value="recent-changes" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recent Changes</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recent Changes</h2>
-          <p className="text-muted-foreground">Latest updates across all entities</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest updates across all entities</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
-        <div className="text-center py-8 text-muted-foreground">
+        {recentChanges.length > 0 ? (
-          No recent changes to display
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+            {recentChanges.map((change) => (
+              <RecentChangeCard
+                key={`${change.entityType}-${change.entityId}-${change.changedAt}`}
+                entityType={change.entityType}
+                entityId={change.entityId}
+                entityName={change.entityName}
+                entitySlug={change.entitySlug}
+                parkSlug={change.parkSlug}
+                imageUrl={change.imageUrl}
+                changeType={change.changeType}
+                changedAt={change.changedAt}
+                changedByUsername={change.changedByUsername}
+                changedByAvatar={change.changedByAvatar}
+                changeReason={change.changeReason}
+              />
+            ))}
           </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-16 px-4">
+            <div className="relative mb-6">
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-2xl animate-pulse" />
+              <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-card via-card to-card/80 flex items-center justify-center border-2 border-primary/20 shadow-xl">
+                <Clock className="w-10 h-10 text-muted-foreground" />
+              </div>
+            </div>
+            <h3 className="text-xl font-semibold mb-2 text-foreground">No Recent Changes</h3>
+            <p className="text-muted-foreground text-center max-w-md text-sm">
+              There are no recent entity changes to display yet. Check back soon for the latest updates to parks, rides, and companies!
+            </p>
+            <div className="mt-6 w-32 h-0.5 bg-gradient-to-r from-transparent via-primary/40 to-transparent rounded-full" />
+          </div>
+        )}
       </TabsContent>
 
       <TabsContent value="recently-opened" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Opened</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Opened</h2>
-          <p className="text-muted-foreground">Parks and rides that opened in the last year</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that opened in the last year</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentlyOpened.map((entity: any) => (

src/components/homepage/RecentChangeCard.tsx

@@ -10,12 +10,13 @@ interface RecentChangeCardProps {
   entityId: string;
   entityName: string;
   entitySlug: string;
-  imageUrl?: string;
+  parkSlug?: string;
+  imageUrl?: string | null;
   changeType: string;
   changedAt: string;
-  changedByUsername?: string;
+  changedByUsername?: string | null;
-  changedByAvatar?: string;
+  changedByAvatar?: string | null;
-  changeReason?: string;
+  changeReason?: string | null;
 }
 
 const changeTypeColors = {
@@ -37,6 +38,7 @@ export function RecentChangeCard({
   entityId,
   entityName,
   entitySlug,
+  parkSlug,
   imageUrl,
   changeType,
   changedAt,
@@ -47,7 +49,10 @@ export function RecentChangeCard({
   const getEntityPath = () => {
     if (entityType === 'park') return `/parks/${entitySlug}`;
     if (entityType === 'ride') {
-      // For rides, we need the park slug too - for now, just link to rides page
+      // For rides, use park slug if available, otherwise fallback to global rides list
+      if (parkSlug) {
+        return `/parks/${parkSlug}/rides/${entitySlug}`;
+      }
       return `/rides`;
     }
     // Company paths - link to the appropriate company page

supabase/migrations/20251028013926_ad44e1ea-5bd9-4c7b-8957-51ad590acb3d.sql

@@ -0,0 +1,36 @@
+-- Install missing versioning triggers for automatic version creation
+-- These triggers should have been created previously but are missing from the database
+
+-- Clean up any existing triggers first
+DROP TRIGGER IF EXISTS create_park_version_on_change ON public.parks;
+DROP TRIGGER IF EXISTS create_ride_version_on_change ON public.rides;
+DROP TRIGGER IF EXISTS create_company_version_on_change ON public.companies;
+DROP TRIGGER IF EXISTS create_ride_model_version_on_change ON public.ride_models;
+
+-- Install versioning trigger for parks
+-- Automatically creates a version record whenever a park is inserted or updated
+CREATE TRIGGER create_park_version_on_change
+  AFTER INSERT OR UPDATE ON public.parks
+  FOR EACH ROW
+  EXECUTE FUNCTION public.create_relational_version();
+
+-- Install versioning trigger for rides
+-- Automatically creates a version record whenever a ride is inserted or updated
+CREATE TRIGGER create_ride_version_on_change
+  AFTER INSERT OR UPDATE ON public.rides
+  FOR EACH ROW
+  EXECUTE FUNCTION public.create_relational_version();
+
+-- Install versioning trigger for companies
+-- Automatically creates a version record whenever a company is inserted or updated
+CREATE TRIGGER create_company_version_on_change
+  AFTER INSERT OR UPDATE ON public.companies
+  FOR EACH ROW
+  EXECUTE FUNCTION public.create_relational_version();
+
+-- Install versioning trigger for ride models
+-- Automatically creates a version record whenever a ride model is inserted or updated
+CREATE TRIGGER create_ride_model_version_on_change
+  AFTER INSERT OR UPDATE ON public.ride_models
+  FOR EACH ROW
+  EXECUTE FUNCTION public.create_relational_version();

tailwind.config.ts

@@ -100,10 +100,15 @@ export default {
             height: "0",
           },
         },
+        shimmer: {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(100%)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        shimmer: "shimmer 2s infinite",
       },
     },
   },