From 4b19e084fbe3d649da3d055c8f82dc8898620b12 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 2 Oct 2025 19:50:56 +0000
Subject: [PATCH] Fix operator parks list

---
 src/pages/OperatorDetail.tsx | 55 ++++++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index 05ff6b46..51105727 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -11,6 +11,7 @@ import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { OperatorForm } from '@/components/admin/OperatorForm';
 import { OperatorPhotoGallery } from '@/components/companies/OperatorPhotoGallery';
+import { ParkCard } from '@/components/parks/ParkCard';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
@@ -20,7 +21,9 @@ export default function OperatorDetail() {
   const { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
   const [operator, setOperator] = useState<Company | null>(null);
+  const [parks, setParks] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
+  const [parksLoading, setParksLoading] = useState(true);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const { user } = useAuth();
   const { isModerator } = useUserRole();
@@ -42,6 +45,11 @@ export default function OperatorDetail() {
 
       if (error) throw error;
       setOperator(data);
+      
+      // Fetch parks operated by this operator
+      if (data) {
+        fetchParks(data.id);
+      }
     } catch (error) {
       console.error('Error fetching operator:', error);
     } finally {
@@ -49,6 +57,27 @@ export default function OperatorDetail() {
     }
   };
 
+  const fetchParks = async (operatorId: string) => {
+    try {
+      const { data, error } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*)
+        `)
+        .eq('operator_id', operatorId)
+        .order('name')
+        .limit(6);
+
+      if (error) throw error;
+      setParks(data || []);
+    } catch (error) {
+      console.error('Error fetching parks:', error);
+    } finally {
+      setParksLoading(false);
+    }
+  };
+
   const handleEditSubmit = async (data: any) => {
     try {
       await submitCompanyUpdate(
@@ -240,8 +269,8 @@ export default function OperatorDetail() {
           <TabsContent value="parks">
             <Card>
               <CardContent className="p-6">
-                <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-2xl font-bold">Parks</h2>
+                <div className="flex items-center justify-between mb-6">
+                  <h2 className="text-2xl font-bold">Parks Operated</h2>
                   <Button 
                     variant="outline" 
                     onClick={() => navigate(`/operators/${operator.slug}/parks`)}
@@ -249,9 +278,25 @@ export default function OperatorDetail() {
                     View All Parks
                   </Button>
                 </div>
-                <p className="text-muted-foreground">
-                  View all parks operated by {operator.name}
-                </p>
+                
+                {parksLoading ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {[1, 2, 3].map((i) => (
+                      <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
+                    ))}
+                  </div>
+                ) : parks.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {parks.map((park) => (
+                      <ParkCard key={park.id} park={park} />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-12 text-muted-foreground">
+                    <FerrisWheel className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No parks found for {operator.name}</p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>