feat: Implement custom view tracking

src/components/homepage/ContentTabs.tsx

@@ -6,9 +6,7 @@ import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 
 export function ContentTabs() {
-  const [popularParks, setPopularParks] = useState<Park[]>([]);
   const [trendingParks, setTrendingParks] = useState<Park[]>([]);
-  const [popularRides, setPopularRides] = useState<Ride[]>([]);
   const [trendingRides, setTrendingRides] = useState<Ride[]>([]);
   const [recentParks, setRecentParks] = useState<Park[]>([]);
   const [recentRides, setRecentRides] = useState<Ride[]>([]);
@@ -20,18 +18,11 @@ export function ContentTabs() {
 
   const fetchContent = async () => {
     try {
-      // Most Popular Parks (by rating)
-      const { data: popular } = await supabase
-        .from('parks')
-        .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
-        .order('average_rating', { ascending: false })
-        .limit(12);
-
-      // Trending Parks (by review count)
+      // Trending Parks (by 30-day view count)
       const { data: trending } = await supabase
         .from('parks')
         .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
-        .order('review_count', { ascending: false })
+        .order('view_count_30d', { ascending: false })
         .limit(12);
 
       // Recently Added Parks
@@ -41,18 +32,11 @@ export function ContentTabs() {
         .order('created_at', { ascending: false })
         .limit(12);
 
-      // Popular Rides (by rating)
-      const { data: popularRidesData } = await supabase
-        .from('rides')
-        .select(`*, park:parks!inner(name, slug, location:locations(*))`)
-        .order('average_rating', { ascending: false })
-        .limit(12);
-
-      // Trending Rides (by review count) 
+      // Trending Rides (by 30-day view count)
       const { data: trendingRidesData } = await supabase
         .from('rides')
         .select(`*, park:parks!inner(name, slug, location:locations(*))`)
-        .order('review_count', { ascending: false })
+        .order('view_count_30d', { ascending: false })
         .limit(12);
 
       // Recently Added Rides
@@ -62,10 +46,8 @@ export function ContentTabs() {
         .order('created_at', { ascending: false })
         .limit(12);
 
-      setPopularParks(popular || []);
       setTrendingParks(trending || []);
       setRecentParks(recent || []);
-      setPopularRides(popularRidesData || []);
       setTrendingRides(trendingRidesData || []);
       setRecentRides(recentRidesData || []);
     } catch (error) {
@@ -96,18 +78,12 @@ export function ContentTabs() {
   return (
     <section className="py-8">
       <div className="container mx-auto px-4">
-        <Tabs defaultValue="popular-parks" className="w-full">
+        <Tabs defaultValue="trending-parks" className="w-full">
           <div className="text-center mb-8">
-            <TabsList className="grid w-full max-w-4xl 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="popular-parks" className="text-xs md:text-sm px-2 py-3">
-                Popular Parks
-              </TabsTrigger>
+            <TabsList className="grid w-full max-w-3xl mx-auto grid-cols-2 md:grid-cols-4 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">
                 Trending Parks
               </TabsTrigger>
-              <TabsTrigger value="popular-rides" className="text-xs md:text-sm px-2 py-3">
-                Popular Rides
-              </TabsTrigger>
               <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3">
                 Trending Rides
               </TabsTrigger>
@@ -120,22 +96,10 @@ export function ContentTabs() {
             </TabsList>
           </div>
 
-      <TabsContent value="popular-parks" className="mt-8">
-        <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
-          <p className="text-muted-foreground">Highest rated theme parks worldwide</p>
-        </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">
-          {popularParks.map((park) => (
-            <ParkCard key={park.id} park={park} />
-          ))}
-        </div>
-      </TabsContent>
-
       <TabsContent value="trending-parks" className="mt-8">
         <div className="text-center mb-6">
           <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
-          <p className="text-muted-foreground">Most reviewed parks this month</p>
+          <p className="text-muted-foreground">Most viewed parks in the last 30 days</p>
         </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) => (
@@ -144,22 +108,10 @@ export function ContentTabs() {
         </div>
       </TabsContent>
 
-      <TabsContent value="popular-rides" className="mt-8">
-        <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
-          <p className="text-muted-foreground">Highest rated attractions worldwide</p>
-        </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">
-          {popularRides.map((ride) => (
-            <RideCard key={ride.id} ride={ride} />
-          ))}
-        </div>
-      </TabsContent>
-
       <TabsContent value="trending-rides" className="mt-8">
         <div className="text-center mb-6">
           <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
-          <p className="text-muted-foreground">Most talked about attractions</p>
+          <p className="text-muted-foreground">Most viewed rides in the last 30 days</p>
         </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) => (