Refactor: Implement app-wide slug generation

src/components/admin/ParkForm.tsx

@@ -10,16 +10,18 @@ import { Label } from '@/components/ui/label';
 import { UppyPhotoUpload } from '@/components/upload/UppyPhotoUpload';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
+import { SlugField } from '@/components/ui/slug-field';
 import { toast } from '@/hooks/use-toast';
 import { MapPin, Save, X, Plus } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Combobox } from '@/components/ui/combobox';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useOperators, usePropertyOwners } from '@/hooks/useAutocompleteData';
+import { useUserRole } from '@/hooks/useUserRole';
 
 const parkSchema = z.object({
   name: z.string().min(1, 'Park name is required'),
-  slug: z.string().min(1, 'Slug is required'),
+  slug: z.string().min(1, 'Slug is required'), // Auto-generated, validated on submit
   description: z.string().optional(),
   park_type: z.string().min(1, 'Park type is required'),
   status: z.string().min(1, 'Status is required'),
@@ -77,6 +79,7 @@ const statusOptions = [
 ];
 
 export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
+  const { isModerator } = useUserRole();
   const [submitting, setSubmitting] = useState(false);
   const [bannerImage, setBannerImage] = useState<string>(initialData?.banner_image_url || '');
   const [cardImage, setCardImage] = useState<string>(initialData?.card_image_url || '');
@@ -127,20 +130,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
     }
   });
 
-  const generateSlug = (name: string) => {
-    return name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim();
-  };
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value;
-    const slug = generateSlug(name);
-    setValue('slug', slug);
-  };
 
   const handleFormSubmit = async (data: ParkFormData) => {
     setSubmitting(true);
@@ -213,10 +202,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
               <Input
                 id="name"
                 {...register('name')}
-                onChange={(e) => {
-                  register('name').onChange(e);
-                  handleNameChange(e);
-                }}
                 placeholder="Enter park name"
               />
               {errors.name && (
@@ -224,17 +209,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
               )}
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="slug">URL Slug *</Label>
-              <Input
-                id="slug"
-                {...register('slug')}
-                placeholder="park-url-slug"
-              />
-              {errors.slug && (
-                <p className="text-sm text-destructive">{errors.slug.message}</p>
-              )}
-            </div>
+            <SlugField
+              name={watch('name')}
+              slug={watch('slug')}
+              onSlugChange={(slug) => setValue('slug', slug)}
+              isModerator={isModerator()}
+            />
           </div>
 
           {/* Description */}