feat: Implement company management plan

src/pages/Manufacturers.tsx

@@ -1,18 +1,30 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Header } from '@/components/layout/Header';
 import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Factory } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus } from 'lucide-react';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
+import { ManufacturerForm } from '@/components/admin/ManufacturerForm';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
+import { toast } from '@/hooks/use-toast';
+import { submitCompanyCreation } from '@/lib/companyHelpers';
 
 export default function Manufacturers() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { isModerator } = useUserRole();
   const [companies, setCompanies] = useState<Company[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   
 
   useEffect(() => {
@@ -52,6 +64,40 @@ export default function Manufacturers() {
     company.description?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+
+      const result = await submitCompanyCreation(
+        data,
+        'manufacturer',
+        user.id,
+        isModerator()
+      );
+
+      toast({
+        title: result.submitted ? "Manufacturer Submitted" : "Manufacturer Created",
+        description: result.submitted 
+          ? "Your submission has been sent for review."
+          : "The manufacturer has been created successfully."
+      });
+
+      setIsCreateModalOpen(false);
+      if (!result.submitted) {
+        fetchCompanies();
+      }
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to create manufacturer.",
+        variant: "destructive"
+      });
+    }
+  };
+
 
 
   if (loading) {
@@ -79,9 +125,17 @@ export default function Manufacturers() {
       <main className="container mx-auto px-4 py-8">
         {/* Page Header */}
         <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</h1>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <Factory className="w-10 h-10 text-primary" />
+              <h1 className="text-4xl font-bold">Manufacturers</h1>
+            </div>
+            {(user && isModerator()) && (
+              <Button onClick={() => setIsCreateModalOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Create Manufacturer
+              </Button>
+            )}
           </div>
           <p className="text-lg text-muted-foreground">
             Explore the manufacturers behind your favorite rides and attractions
@@ -136,6 +190,16 @@ export default function Manufacturers() {
           </div>
         )}
       </main>
+
+      {/* Create Modal */}
+      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <ManufacturerForm
+            onSubmit={handleCreateSubmit}
+            onCancel={() => setIsCreateModalOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }