Approve database migration

src/pages/RideDetail.tsx

@@ -53,6 +53,8 @@ export default function RideDetail() {
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState("overview");
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [photoCount, setPhotoCount] = useState<number>(0);
+  const [statsLoading, setStatsLoading] = useState(true);
   const { user } = useAuth();
   const { isModerator } = useUserRole();
 
@@ -88,6 +90,7 @@ export default function RideDetail() {
         if (rideData) {
           // Store park_id for easier access
           (rideData as any).currentParkId = parkData.id;
+          fetchPhotoCount(rideData.id);
         }
 
         setRide(rideData);
@@ -99,6 +102,24 @@ export default function RideDetail() {
     }
   };
 
+  const fetchPhotoCount = async (rideId: string) => {
+    try {
+      const { count, error } = await supabase
+        .from('photos')
+        .select('id', { count: 'exact', head: true })
+        .eq('entity_type', 'ride')
+        .eq('entity_id', rideId);
+
+      if (error) throw error;
+      setPhotoCount(count || 0);
+    } catch (error) {
+      console.error('Error fetching photo count:', error);
+      setPhotoCount(0);
+    } finally {
+      setStatsLoading(false);
+    }
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
@@ -387,7 +408,9 @@ export default function RideDetail() {
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="specs">Specifications</TabsTrigger>
             <TabsTrigger value="reviews">Reviews</TabsTrigger>
-            <TabsTrigger value="photos">Photos</TabsTrigger>
+            <TabsTrigger value="photos">
+              Photos {!statsLoading && photoCount > 0 && `(${photoCount})`}
+            </TabsTrigger>
             <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>