Refactor: Implement app-wide slug generation

src/components/admin/PropertyOwnerForm.tsx

@@ -7,9 +7,11 @@ import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { SlugField } from '@/components/ui/slug-field';
 import { Building2, Save, X } from 'lucide-react';
 import { Combobox } from '@/components/ui/combobox';
 import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
+import { useUserRole } from '@/hooks/useUserRole';
 
 const propertyOwnerSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -30,6 +32,7 @@ interface PropertyOwnerFormProps {
 }
 
 export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyOwnerFormProps) {
+  const { isModerator } = useUserRole();
   const { headquarters } = useCompanyHeadquarters();
   
   const {
@@ -51,20 +54,6 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
     }
   });
 
-  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);
-  };
 
   return (
     <Card>
@@ -83,10 +72,6 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
               <Input
                 id="name"
                 {...register('name')}
-                onChange={(e) => {
-                  register('name').onChange(e);
-                  handleNameChange(e);
-                }}
                 placeholder="Enter property owner name"
               />
               {errors.name && (
@@ -94,17 +79,12 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
               )}
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="slug">URL Slug *</Label>
-              <Input
-                id="slug"
-                {...register('slug')}
-                placeholder="property-owner-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 */}