Refactor: Implement unified responsive design

src/components/designers/DesignerFilters.tsx

@@ -84,7 +84,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>

src/components/manufacturers/ManufacturerFilters.tsx

@@ -84,7 +84,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>

src/components/operators/OperatorFilters.tsx

@@ -87,7 +87,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <FilterMultiSelectCombobox
             label="Headquarters Country"

src/components/parks/ParkFilters.tsx

@@ -143,8 +143,8 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
           {/* Park Type */}
           <div className="space-y-2">
             <Label>Park Type</Label>

src/components/rides/RideFilters.tsx

@@ -281,7 +281,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Relationship Filters */}
       <FilterSection title="Parks & Companies">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <FilterMultiSelectCombobox
             label="Parks"
             options={parkOptions}

src/pages/Designers.tsx

@@ -138,33 +138,42 @@ export default function Designers() {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
+        <div className="mb-6 space-y-4">
-          <div className="relative">
+          <div className="flex flex-col lg:flex-row gap-4">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <div className="flex-1">
-            <Input
+              <div className="relative">
-              placeholder="Search designers..."
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-              value={searchQuery}
+                <Input
-              onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search designers..."
-              className="pl-10 h-11"
+                  value={searchQuery}
-            />
+                  onChange={(e) => setSearchQuery(e.target.value)}
-          </div>
+                  className="pl-10 h-11"
-          
+                />
-          <div className="flex gap-2">
+              </div>
-            <Select value={sortBy} onValueChange={setSortBy}>
+            </div>
-              <SelectTrigger className="w-[180px] h-10">
+            
-                <SlidersHorizontal className="h-4 w-4 mr-2" />
+            <div className="flex gap-2 w-full lg:w-auto">
-                <SelectValue />
+              <Select value={sortBy} onValueChange={setSortBy}>
-              </SelectTrigger>
+                <SelectTrigger className="w-[180px] h-10">
-              <SelectContent>
+                  <SlidersHorizontal className="h-4 w-4 mr-2" />
-                <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectValue />
-                <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectTrigger>
-              </SelectContent>
+                <SelectContent>
-            </Select>
+                  <SelectItem value="name">Name A-Z</SelectItem>
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
-              <Filter className="w-4 h-4" />
+                </SelectContent>
-              Filters
+              </Select>
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              
-            </Button>
+              <Button 
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)} 
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Manufacturers.tsx

@@ -151,33 +151,42 @@ export default function Manufacturers() {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
+        <div className="mb-6 space-y-4">
-          <div className="relative">
+          <div className="flex flex-col lg:flex-row gap-4">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <div className="flex-1">
-            <Input
+              <div className="relative">
-              placeholder="Search manufacturers..."
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-              value={searchQuery}
+                <Input
-              onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search manufacturers..."
-              className="pl-10 h-11"
+                  value={searchQuery}
-            />
+                  onChange={(e) => setSearchQuery(e.target.value)}
-          </div>
+                  className="pl-10 h-11"
-          
+                />
-          <div className="flex gap-2">
+              </div>
-            <Select value={sortBy} onValueChange={setSortBy}>
+            </div>
-              <SelectTrigger className="w-[180px] h-10">
+            
-                <SlidersHorizontal className="h-4 w-4 mr-2" />
+            <div className="flex gap-2 w-full lg:w-auto">
-                <SelectValue />
+              <Select value={sortBy} onValueChange={setSortBy}>
-              </SelectTrigger>
+                <SelectTrigger className="w-[180px] h-10">
-              <SelectContent>
+                  <SlidersHorizontal className="h-4 w-4 mr-2" />
-                <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectValue />
-                <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectTrigger>
-              </SelectContent>
+                <SelectContent>
-            </Select>
+                  <SelectItem value="name">Name A-Z</SelectItem>
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
-              <Filter className="w-4 h-4" />
+                </SelectContent>
-              Filters
+              </Select>
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              
-            </Button>
+              <Button 
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)} 
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Operators.tsx

@@ -92,14 +92,61 @@ const Operators = () => {
     if (!operators) return [];
 
     let filtered = operators.filter(operator => {
+      // Search filter
       const matchesSearch = operator.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           (operator.description && operator.description.toLowerCase().includes(searchTerm.toLowerCase()));
       
-      if (filterBy === 'all') return matchesSearch;
+      if (!matchesSearch) return false;
-      if (filterBy === 'with-rating') return matchesSearch && operator.average_rating > 0;
+
-      if (filterBy === 'established') return matchesSearch && operator.founded_year;
+      // Country filter
+      if (filters.countries.length > 0) {
+        if (!operator.headquarters_location || !filters.countries.some(c => operator.headquarters_location?.includes(c))) {
+          return false;
+        }
+      }
+
+      // Rating filter
+      const rating = operator.average_rating || 0;
+      if (rating < filters.minRating || rating > filters.maxRating) {
+        return false;
+      }
+
+      // Review count filter
+      const reviewCount = operator.review_count || 0;
+      if (reviewCount < filters.minReviewCount || reviewCount > filters.maxReviewCount) {
+        return false;
+      }
+
+      // Park count filter
+      const parkCount = operator.park_count || 0;
+      if (parkCount < filters.minParkCount || parkCount > filters.maxParkCount) {
+        return false;
+      }
+
+      // Founded date filter
+      if (filters.foundedDateFrom || filters.foundedDateTo) {
+        if (!operator.founded_year) {
+          return false;
+        }
+        if (filters.foundedDateFrom && operator.founded_year < filters.foundedDateFrom.getFullYear()) {
+          return false;
+        }
+        if (filters.foundedDateTo && operator.founded_year > filters.foundedDateTo.getFullYear()) {
+          return false;
+        }
+      }
+
+      // Has rating filter
+      if (filters.hasRating && !operator.average_rating) {
+        return false;
+      }
+
+      // Has founded date filter
+      if (filters.hasFoundedDate && !operator.founded_year) {
+        return false;
+      }
       
-      return matchesSearch;
+      return true;
     });
 
     // Sort
@@ -119,7 +166,7 @@ const Operators = () => {
     });
 
     return filtered;
-  }, [operators, searchTerm, sortBy, filterBy]);
+  }, [operators, searchTerm, sortBy, filters]);
 
   return (
     <div className="min-h-screen bg-background">
@@ -161,35 +208,43 @@ const Operators = () => {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
+        <div className="mb-6 space-y-4">
-          <div className="relative">
+          <div className="flex flex-col lg:flex-row gap-4">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <div className="flex-1">
-            <Input
+              <div className="relative">
-              placeholder="Search park operators..."
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-              value={searchTerm}
+                <Input
-              onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="Search park operators..."
-              className="pl-10 h-11"
+                  value={searchTerm}
-            />
+                  onChange={(e) => setSearchTerm(e.target.value)}
-          </div>
+                  className="pl-10 h-11"
-          
+                />
-          <div className="flex gap-2">
+              </div>
-            <Select value={sortBy} onValueChange={setSortBy}>
+            </div>
-              <SelectTrigger className="w-[180px] h-10">
+            
-                <SelectValue placeholder="Sort by" />
+            <div className="flex gap-2 w-full lg:w-auto">
-              </SelectTrigger>
+              <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectContent>
+                <SelectTrigger className="w-[180px] h-10">
-                <SelectItem value="name">Name</SelectItem>
+                  <SelectValue placeholder="Sort by" />
-                <SelectItem value="rating">Rating</SelectItem>
+                </SelectTrigger>
-                <SelectItem value="founded">Founded Year</SelectItem>
+                <SelectContent>
-                <SelectItem value="reviews">Review Count</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
-              </SelectContent>
+                  <SelectItem value="rating">Rating</SelectItem>
-            </Select>
+                  <SelectItem value="founded">Founded Year</SelectItem>
+                  <SelectItem value="reviews">Review Count</SelectItem>
+                </SelectContent>
+              </Select>
 
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+              <Button 
-              <Filter className="w-4 h-4" />
+                variant={showFilters ? "default" : "outline"}
-              Filters
+                onClick={() => setShowFilters(!showFilters)} 
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+                className="gap-2"
-            </Button>
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Parks.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { 
@@ -412,12 +413,13 @@ export default function Parks() {
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="shrink-0"
+                className="shrink-0 gap-2"
               >
-                <Filter className="w-4 h-4 md:mr-2" />
+                <Filter className="w-4 h-4" />
-                <span className="hidden md:inline">Filters</span>
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
                 {activeFilterCount > 0 && (
-                  <Badge variant="secondary" className="ml-2">
+                  <Badge variant="secondary" className="ml-1">
                     {activeFilterCount}
                   </Badge>
                 )}
@@ -437,17 +439,19 @@ export default function Parks() {
           </div>
 
           {/* Advanced Filters Panel */}
-          {showFilters && (
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
-            <Card>
+            <CollapsibleContent>
-              <CardContent className="p-6">
+              <Card>
-                <ParkFilters 
+                <CardContent className="pt-6">
-                  filters={filters}
+                  <ParkFilters 
-                  onFiltersChange={setFilters}
+                    filters={filters}
-                  parks={parks}
+                    onFiltersChange={setFilters}
-                />
+                    parks={parks}
-              </CardContent>
+                  />
-            </Card>
+                </CardContent>
-          )}
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         {/* Results */}

src/pages/Rides.tsx

@@ -185,12 +185,12 @@ export default function Rides() {
               </Select>
               
               <Button
-                variant="outline"
+                variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
                 className="gap-2"
               >
                 <Filter className="w-4 h-4" />
-                Filters
+                <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
             </div>