Approve database migration

src/pages/ParkDetail.tsx

@@ -36,6 +36,8 @@ export default function ParkDetail() {
   const [loading, setLoading] = useState(true);
   const [isAddRideModalOpen, setIsAddRideModalOpen] = useState(false);
   const [isEditParkModalOpen, setIsEditParkModalOpen] = useState(false);
+  const [photoCount, setPhotoCount] = useState<number>(0);
+  const [statsLoading, setStatsLoading] = useState(true);
   const { isModerator } = useUserRole();
   useEffect(() => {
     if (slug) {
@@ -55,6 +57,7 @@ export default function ParkDetail() {
         `).eq('slug', slug).maybeSingle();
       if (parkData) {
         setPark(parkData);
+        fetchPhotoCount(parkData.id);
 
         // Fetch park rides
         const {
@@ -68,6 +71,24 @@ export default function ParkDetail() {
       setLoading(false);
     }
   };
+
+  const fetchPhotoCount = async (parkId: string) => {
+    try {
+      const { count, error } = await supabase
+        .from('photos')
+        .select('id', { count: 'exact', head: true })
+        .eq('entity_type', 'park')
+        .eq('entity_id', parkId);
+
+      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':
@@ -361,7 +382,9 @@ export default function ParkDetail() {
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="rides">Rides ({rides.length})</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>