feat: Implement company management plan

src/pages/Designers.tsx

@@ -1,18 +1,48 @@
 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, Palette } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus } from 'lucide-react';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { DesignerCard } from '@/components/designers/DesignerCard';
+import { DesignerForm } from '@/components/admin/DesignerForm';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
+import { toast } from '@/hooks/use-toast';
+import { submitCompanyCreation } from '@/lib/companyHelpers';
 
 export default function Designers() {
+  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);
+
+  const handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      const result = await submitCompanyCreation(data, 'designer', user.id, isModerator());
+      toast({
+        title: result.submitted ? "Designer Submitted" : "Designer Created",
+        description: result.submitted ? "Your submission has been sent for review." : "The designer has been created successfully."
+      });
+      setIsCreateModalOpen(false);
+      if (!result.submitted) fetchCompanies();
+    } catch (error: any) {
+      toast({ title: "Error", description: error.message || "Failed to create designer.", variant: "destructive" });
+    }
+  };
 
   useEffect(() => {
     fetchCompanies();
@@ -76,9 +106,16 @@ export default function Designers() {
       <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 className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <Ruler className="w-10 h-10 text-primary" />
+              <h1 className="text-4xl font-bold">Designers</h1>
+            </div>
+            {(user && isModerator()) && (
+              <Button onClick={() => setIsCreateModalOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />Create Designer
+              </Button>
+            )}
           </div>
           <p className="text-lg text-muted-foreground">
             Explore the designers behind your favorite rides and attractions
@@ -124,7 +161,7 @@ export default function Designers() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <Palette className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+            <Ruler 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
@@ -132,6 +169,11 @@ export default function Designers() {
           </div>
         )}
       </main>
+      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DesignerForm onSubmit={handleCreateSubmit} onCancel={() => setIsCreateModalOpen(false)} />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }