Refactor: Enhance Park List View

src/pages/Designers.tsx

@@ -8,12 +8,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { DesignerCard } from '@/components/designers/DesignerCard';
+import { DesignerListView } from '@/components/designers/DesignerListView';
 import { DesignerForm } from '@/components/admin/DesignerForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -33,6 +35,7 @@ export default function Designers() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('designers-sidebar-collapsed');
@@ -200,6 +203,12 @@ export default function Designers() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -246,11 +255,15 @@ export default function Designers() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                {filteredCompanies.map((company) => (
-                  <DesignerCard key={company.id} company={company} />
-                ))}
-              </div>
+              viewMode === 'grid' ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+                  {filteredCompanies.map((company) => (
+                    <DesignerCard key={company.id} company={company} />
+                  ))}
+                </div>
+              ) : (
+                <DesignerListView designers={filteredCompanies} onDesignerClick={(d) => navigate(`/designers/${d.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />

src/pages/Manufacturers.tsx

@@ -8,12 +8,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { ManufacturerFilters, ManufacturerFilterState, defaultManufacturerFilters } from '@/components/manufacturers/ManufacturerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
+import { ManufacturerListView } from '@/components/manufacturers/ManufacturerListView';
 import { ManufacturerForm } from '@/components/admin/ManufacturerForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -33,6 +35,7 @@ export default function Manufacturers() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<ManufacturerFilterState>(defaultManufacturerFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('manufacturers-sidebar-collapsed');
@@ -213,6 +216,12 @@ export default function Manufacturers() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -259,11 +268,15 @@ export default function Manufacturers() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                {filteredCompanies.map((company) => (
-                  <ManufacturerCard key={company.id} company={company} />
-                ))}
-              </div>
+              viewMode === 'grid' ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+                  {filteredCompanies.map((company) => (
+                    <ManufacturerCard key={company.id} company={company} />
+                  ))}
+                </div>
+              ) : (
+                <ManufacturerListView manufacturers={filteredCompanies} onManufacturerClick={(m) => navigate(`/manufacturers/${m.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />

src/pages/Operators.tsx

@@ -9,10 +9,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { supabase } from '@/integrations/supabase/client';
 import OperatorCard from '@/components/operators/OperatorCard';
+import { OperatorListView } from '@/components/operators/OperatorListView';
 import { OperatorForm } from '@/components/admin/OperatorForm';
 import { OperatorFilters, OperatorFilterState, defaultOperatorFilters } from '@/components/operators/OperatorFilters';
 import { Company } from '@/types/database';
@@ -32,6 +34,7 @@ const Operators = () => {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('operators-sidebar-collapsed');
@@ -271,6 +274,12 @@ const Operators = () => {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -324,13 +333,17 @@ const Operators = () => {
               </div>
             )}
 
-            {/* Operators Grid */}
+            {/* Operators Grid/List */}
             {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                {filteredAndSortedOperators.map((operator) => (
-                  <OperatorCard key={operator.id} company={operator} />
-                ))}
-              </div>
+              viewMode === 'grid' ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+                  {filteredAndSortedOperators.map((operator) => (
+                    <OperatorCard key={operator.id} company={operator} />
+                  ))}
+                </div>
+              ) : (
+                <OperatorListView operators={filteredAndSortedOperators} onOperatorClick={(op) => navigate(`/operators/${op.slug}`)} />
+              )
             )}
 
             {/* Empty State */}

src/pages/Rides.tsx

@@ -7,10 +7,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { RideCard } from '@/components/rides/RideCard';
+import { RideListView } from '@/components/rides/RideListView';
 import { RideForm } from '@/components/admin/RideForm';
 import { RideFilters, RideFilterState, defaultRideFilters } from '@/components/rides/RideFilters';
 import { Ride } from '@/types/database';
@@ -32,6 +34,7 @@ export default function Rides() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('rides-sidebar-collapsed');
@@ -221,6 +224,13 @@ export default function Rides() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
 
@@ -267,11 +277,15 @@ export default function Rides() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredRides.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                {filteredRides.map((ride) => (
-                  <RideCard key={ride.id} ride={ride} showParkName={true} />
-                ))}
-              </div>
+              viewMode === 'grid' ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+                  {filteredRides.map((ride) => (
+                    <RideCard key={ride.id} ride={ride} showParkName={true} />
+                  ))}
+                </div>
+              ) : (
+                <RideListView rides={filteredRides} onRideClick={(ride) => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />