feat: Implement Operators listing page

src/App.tsx

@@ -15,6 +15,7 @@ import Rides from "./pages/Rides";
 import Manufacturers from "./pages/Manufacturers";
 import Designers from "./pages/Designers";
 import ParkOwners from "./pages/ParkOwners";
+import Operators from "./pages/Operators";
 import Auth from "./pages/Auth";
 import Profile from "./pages/Profile";
 import UserSettings from "./pages/UserSettings";
@@ -47,6 +48,7 @@ function AppContent() {
                 <Route path="/manufacturers" element={<Manufacturers />} />
                 <Route path="/designers" element={<Designers />} />
                 <Route path="/owners" element={<ParkOwners />} />
+                <Route path="/operators" element={<Operators />} />
                 <Route path="/auth" element={<Auth />} />
                 <Route path="/profile" element={<Profile />} />
                 <Route path="/profile/:username" element={<Profile />} />

src/components/operators/OperatorCard.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Building, Star, MapPin } from 'lucide-react';
+import { Company } from '@/types/database';
+
+interface OperatorCardProps {
+  company: Company;
+}
+
+const OperatorCard = ({ company }: OperatorCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/operators/${company.slug}/parks/`);
+  };
+
+  const getCompanyIcon = () => {
+    return <Building className="w-5 h-5" />;
+  };
+
+  return (
+    <Card 
+      className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
+      onClick={handleClick}
+    >
+      {/* Logo/Image Section */}
+      <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+        
+        {/* Park Operator Badge */}
+        <div className="absolute top-3 right-3 z-10">
+          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
+            Park Operator
+          </Badge>
+        </div>
+
+        {/* Logo Display */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          {company.logo_url ? (
+            <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+              <img 
+                src={company.logo_url} 
+                alt={`${company.name} logo`}
+                className="w-full h-full object-contain p-2"
+              />
+            </div>
+          ) : (
+            <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+              {getCompanyIcon()}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <CardContent className="p-4 space-y-3">
+        {/* Company Name */}
+        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
+          {company.name}
+        </h3>
+
+        {/* Description */}
+        {company.description && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {company.description}
+          </p>
+        )}
+
+        {/* Company Info */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+          {company.founded_year && (
+            <div className="flex items-center gap-1">
+              <span className="text-muted-foreground">Founded:</span>
+              <span className="font-medium">{company.founded_year}</span>
+            </div>
+          )}
+          
+          {company.headquarters_location && (
+            <div className="flex items-center gap-1">
+              <MapPin className="w-3 h-3 text-muted-foreground" />
+              <span className="text-muted-foreground truncate">
+                {company.headquarters_location}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Rating */}
+        {company.average_rating > 0 && (
+          <div className="flex items-center gap-1">
+            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+            <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+            <span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
+          </div>
+        )}
+
+        {/* Park Count Stats */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+          {(company as any).park_count > 0 && (
+            <div className="flex items-center gap-1">
+              <Building className="w-3 h-3 text-muted-foreground" />
+              <span className="font-medium">{(company as any).park_count}</span>
+              <span className="text-muted-foreground">parks operated</span>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OperatorCard;

src/pages/Operators.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Header } from '@/components/layout/Header';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search, Filter, Building } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import OperatorCard from '@/components/operators/OperatorCard';
+import { Company } from '@/types/database';
+
+const Operators = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [filterBy, setFilterBy] = useState('all');
+
+  const { data: operators, isLoading } = useQuery({
+    queryKey: ['operators'],
+    queryFn: async () => {
+      // Get companies that are park operators with park counts
+      const { data, error } = await supabase
+        .from('companies')
+        .select(`
+          *,
+          parks:parks!operator_id(count)
+        `)
+        .in('id', 
+          await supabase
+            .from('parks')
+            .select('operator_id')
+            .not('operator_id', 'is', null)
+            .then(({ data }) => data?.map(park => park.operator_id) || [])
+        )
+        .order('name');
+
+      if (error) throw error;
+      
+      // Transform the data to include park_count
+      const transformedData = data?.map(company => ({
+        ...company,
+        park_count: company.parks?.[0]?.count || 0
+      })) || [];
+      
+      return transformedData as (Company & { park_count: number })[];
+    },
+  });
+
+  const filteredAndSortedOperators = React.useMemo(() => {
+    if (!operators) return [];
+
+    let filtered = operators.filter(operator => {
+      const matchesSearch = operator.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          (operator.description && operator.description.toLowerCase().includes(searchTerm.toLowerCase()));
+      
+      if (filterBy === 'all') return matchesSearch;
+      if (filterBy === 'with-rating') return matchesSearch && operator.average_rating > 0;
+      if (filterBy === 'established') return matchesSearch && operator.founded_year;
+      
+      return matchesSearch;
+    });
+
+    // Sort
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'rating':
+          return (b.average_rating || 0) - (a.average_rating || 0);
+        case 'founded':
+          return (b.founded_year || 0) - (a.founded_year || 0);
+        case 'reviews':
+          return (b.review_count || 0) - (a.review_count || 0);
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [operators, searchTerm, sortBy, filterBy]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        <div className="flex items-center gap-3 mb-8">
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <Building className="h-6 w-6 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">Park Operators</h1>
+            <p className="text-muted-foreground">
+              Discover companies that operate theme parks
+            </p>
+          </div>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="flex flex-col sm:flex-row gap-4 mb-8">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <Input
+              placeholder="Search park operators..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+          
+          <Select value={sortBy} onValueChange={setSortBy}>
+            <SelectTrigger className="w-full sm:w-48">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="name">Name</SelectItem>
+              <SelectItem value="rating">Rating</SelectItem>
+              <SelectItem value="founded">Founded Year</SelectItem>
+              <SelectItem value="reviews">Review Count</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={filterBy} onValueChange={setFilterBy}>
+            <SelectTrigger className="w-full sm:w-48">
+              <Filter className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Filter" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Operators</SelectItem>
+              <SelectItem value="with-rating">With Ratings</SelectItem>
+              <SelectItem value="established">Established</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Results Count */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">
+              {filteredAndSortedOperators?.length || 0} park operators
+            </Badge>
+            {searchTerm && (
+              <Badge variant="outline">
+                Searching: "{searchTerm}"
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+            <p className="text-muted-foreground mt-4">Loading park operators...</p>
+          </div>
+        )}
+
+        {/* Operators Grid */}
+        {!isLoading && filteredAndSortedOperators && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {filteredAndSortedOperators.map((operator) => (
+              <OperatorCard key={operator.id} company={operator} />
+            ))}
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && filteredAndSortedOperators?.length === 0 && (
+          <div className="text-center py-12">
+            <Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No park operators found</h3>
+            <p className="text-muted-foreground">
+              {searchTerm 
+                ? "Try adjusting your search terms or filters"
+                : "No park operators are currently available"
+              }
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};
+
+export default Operators;