From 540776316227492db36f76cbfcfe1b38eced9a46 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:53:05 +0000
Subject: [PATCH] Refactor manufacturers page

---
 src/App.tsx                                   |   2 +
 .../manufacturers/ManufacturerCard.tsx        |   3 +-
 src/pages/Designers.tsx                       | 137 ++++++++++++++++++
 src/pages/Manufacturers.tsx                   |  45 ++----
 4 files changed, 152 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/Designers.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1fe2424c..45348a62 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import ParkDetail from "./pages/ParkDetail";
 import RideDetail from "./pages/RideDetail";
 import Rides from "./pages/Rides";
 import Manufacturers from "./pages/Manufacturers";
+import Designers from "./pages/Designers";
 import Auth from "./pages/Auth";
 import Profile from "./pages/Profile";
 import UserSettings from "./pages/UserSettings";
@@ -42,6 +43,7 @@ function AppContent() {
                 <Route path="/parks/:parkSlug/rides/:rideSlug" element={<RideDetail />} />
                 <Route path="/rides" element={<Rides />} />
                 <Route path="/manufacturers" element={<Manufacturers />} />
+                <Route path="/designers" element={<Designers />} />
                 <Route path="/auth" element={<Auth />} />
                 <Route path="/profile" element={<Profile />} />
                 <Route path="/profile/:username" element={<Profile />} />
diff --git a/src/components/manufacturers/ManufacturerCard.tsx b/src/components/manufacturers/ManufacturerCard.tsx
index a8572948..6da9253a 100644
--- a/src/components/manufacturers/ManufacturerCard.tsx
+++ b/src/components/manufacturers/ManufacturerCard.tsx
@@ -13,7 +13,8 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
   const navigate = useNavigate();
   
   const handleClick = () => {
-    navigate(`/manufacturers/${company.slug}/`);
+    const basePath = company.company_type === 'designer' ? '/designers' : '/manufacturers';
+    navigate(`${basePath}/${company.slug}/`);
   };
 
   const getCompanyIcon = (type: string) => {
diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx
new file mode 100644
index 00000000..d93c3c51
--- /dev/null
+++ b/src/pages/Designers.tsx
@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { Header } from '@/components/layout/Header';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Search, SlidersHorizontal, Palette } from 'lucide-react';
+import { Company } from '@/types/database';
+import { supabase } from '@/integrations/supabase/client';
+import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
+
+export default function Designers() {
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+
+  useEffect(() => {
+    fetchCompanies();
+  }, [sortBy]);
+
+  const fetchCompanies = async () => {
+    try {
+      let query = supabase
+        .from('companies')
+        .select('*');
+
+      // Filter only designers
+      query = query.eq('company_type', 'designer');
+
+      // Apply sorting
+      switch (sortBy) {
+        case 'founded':
+          query = query.order('founded_year', { ascending: false, nullsFirst: false });
+          break;
+        default:
+          query = query.order('name');
+      }
+
+      const { data } = await query;
+      setCompanies(data || []);
+    } catch (error) {
+      console.error('Error fetching companies:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredCompanies = companies.filter(company =>
+    company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    company.headquarters_location?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    company.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="animate-pulse space-y-6">
+            <div className="h-12 bg-muted rounded w-1/3"></div>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {[...Array(8)].map((_, i) => (
+                <div key={i} className="h-64 bg-muted rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        {/* Page Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <Palette className="w-10 h-10 text-primary" />
+            <h1 className="text-4xl font-bold">Designers</h1>
+          </div>
+          <p className="text-lg text-muted-foreground">
+            Explore the designers behind your favorite rides and attractions
+          </p>
+          <div className="flex items-center gap-2 mt-2">
+            <Badge variant="secondary">{filteredCompanies.length} designers found</Badge>
+          </div>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="mb-8 space-y-4">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <Input
+                placeholder="Search designers by name, location, or description..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <div className="flex gap-2">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px]">
+                  <SlidersHorizontal className="w-4 h-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* Companies Grid */}
+        {filteredCompanies.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {filteredCompanies.map((company) => (
+              <ManufacturerCard key={company.id} company={company} />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <Palette className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+            <h3 className="text-xl font-semibold mb-2">No designers found</h3>
+            <p className="text-muted-foreground">
+              Try adjusting your search criteria
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx
index 1c4bc5c1..8313d809 100644
--- a/src/pages/Manufacturers.tsx
+++ b/src/pages/Manufacturers.tsx
@@ -3,7 +3,7 @@ import { Header } from '@/components/layout/Header';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Search, Filter, SlidersHorizontal, Factory } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory } from 'lucide-react';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
@@ -13,11 +13,11 @@ export default function Manufacturers() {
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
-  const [filterType, setFilterType] = useState('all');
+  
 
   useEffect(() => {
     fetchCompanies();
-  }, [sortBy, filterType]);
+  }, [sortBy]);
 
   const fetchCompanies = async () => {
     try {
@@ -25,10 +25,8 @@ export default function Manufacturers() {
         .from('companies')
         .select('*');
 
-      // Apply filters
-      if (filterType !== 'all') {
-        query = query.eq('company_type', filterType);
-      }
+        // Filter only manufacturers
+        query = query.eq('company_type', 'manufacturer');
 
       // Apply sorting
       switch (sortBy) {
@@ -55,13 +53,6 @@ export default function Manufacturers() {
   );
 
 
-  const companyTypes = [
-    { value: 'all', label: 'All Types' },
-    { value: 'manufacturer', label: 'Manufacturers' },
-    { value: 'operator', label: 'Operators' },
-    { value: 'designer', label: 'Designers' },
-    { value: 'contractor', label: 'Contractors' }
-  ];
 
   if (loading) {
     return (
@@ -90,14 +81,13 @@ export default function Manufacturers() {
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
             <Factory className="w-10 h-10 text-primary" />
-            <h1 className="text-4xl font-bold">Manufacturers & Companies</h1>
+            <h1 className="text-4xl font-bold">Manufacturers</h1>
           </div>
           <p className="text-lg text-muted-foreground">
-            Explore the companies behind your favorite rides and attractions
+            Explore the manufacturers behind your favorite rides and attractions
           </p>
           <div className="flex items-center gap-2 mt-2">
-            <Badge variant="secondary">{filteredCompanies.length} companies found</Badge>
-            <Badge variant="outline">{companies.filter(c => c.company_type === 'manufacturer').length} manufacturers</Badge>
+            <Badge variant="secondary">{filteredCompanies.length} manufacturers found</Badge>
           </div>
         </div>
 
@@ -107,7 +97,7 @@ export default function Manufacturers() {
             <div className="relative flex-1">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
               <Input
-                placeholder="Search companies by name, location, or description..."
+                placeholder="Search manufacturers by name, location, or description..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="pl-10"
@@ -125,19 +115,6 @@ export default function Manufacturers() {
                 </SelectContent>
               </Select>
               
-              <Select value={filterType} onValueChange={setFilterType}>
-                <SelectTrigger className="w-[160px]">
-                  <Filter className="w-4 h-4 mr-2" />
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {companyTypes.map(type => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
             </div>
           </div>
         </div>
@@ -152,9 +129,9 @@ export default function Manufacturers() {
         ) : (
           <div className="text-center py-12">
             <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No companies found</h3>
+            <h3 className="text-xl font-semibold mb-2">No manufacturers found</h3>
             <p className="text-muted-foreground">
-              Try adjusting your search criteria or filters
+              Try adjusting your search criteria
             </p>
           </div>
         )}