feat: Add HeadquartersLocationInput component

src/components/admin/DesignerForm.tsx

@@ -12,9 +12,8 @@ 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 { Ruler, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitDesignerCreation, submitDesignerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface DesignerFormProps {
 
 export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
-                options={headquarters}
-                value={watch('headquarters_location')}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
+              <HeadquartersLocationInput
+                value={watch('headquarters_location') || ''}
+                onChange={(value) => setValue('headquarters_location', value)}
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/HeadquartersLocationInput.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, Edit, MapPin, Loader2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface LocationResult {
+  place_id: number;
+  display_name: string;
+  address?: {
+    city?: string;
+    town?: string;
+    village?: string;
+    state?: string;
+    country?: string;
+  };
+}
+
+interface HeadquartersLocationInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function HeadquartersLocationInput({
+  value,
+  onChange,
+  disabled = false,
+  className
+}: HeadquartersLocationInputProps) {
+  const [mode, setMode] = useState<'search' | 'manual'>('search');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [results, setResults] = useState<LocationResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+
+  // Debounced search effect
+  useEffect(() => {
+    if (!searchQuery || searchQuery.length < 2) {
+      setResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        const response = await fetch(
+          `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
+            searchQuery
+          )}&limit=5&addressdetails=1`,
+          {
+            headers: {
+              'User-Agent': 'ThemeParkArchive/1.0'
+            }
+          }
+        );
+        
+        if (response.ok) {
+          const data = await response.json();
+          setResults(data);
+          setShowResults(true);
+        }
+      } catch (error) {
+        console.error('Error searching locations:', error);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  const formatLocation = (result: LocationResult): string => {
+    const { city, town, village, state, country } = result.address || {};
+    const cityName = city || town || village;
+    
+    if (cityName && state && country) {
+      return `${cityName}, ${state}, ${country}`;
+    } else if (cityName && country) {
+      return `${cityName}, ${country}`;
+    } else if (country) {
+      return country;
+    }
+    return result.display_name;
+  };
+
+  const handleSelectLocation = (result: LocationResult) => {
+    const formatted = formatLocation(result);
+    onChange(formatted);
+    setSearchQuery('');
+    setShowResults(false);
+    setResults([]);
+  };
+
+  const handleClear = () => {
+    onChange('');
+    setSearchQuery('');
+    setResults([]);
+    setShowResults(false);
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Tabs value={mode} onValueChange={(val) => setMode(val as 'search' | 'manual')}>
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="search" disabled={disabled}>
+            <Search className="w-4 h-4 mr-2" />
+            Search Location
+          </TabsTrigger>
+          <TabsTrigger value="manual" disabled={disabled}>
+            <Edit className="w-4 h-4 mr-2" />
+            Manual Entry
+          </TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="search" className="space-y-2 mt-4">
+          <div className="relative">
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search for location (e.g., Munich, Germany)..."
+              disabled={disabled}
+              className="pr-10"
+            />
+            {isSearching && (
+              <Loader2 className="w-4 h-4 absolute right-3 top-3 animate-spin text-muted-foreground" />
+            )}
+          </div>
+
+          {showResults && results.length > 0 && (
+            <div className="border rounded-md bg-card max-h-48 overflow-y-auto">
+              {results.map((result) => (
+                <button
+                  key={result.place_id}
+                  type="button"
+                  onClick={() => handleSelectLocation(result)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent hover:text-accent-foreground text-sm flex items-start gap-2 transition-colors"
+                  disabled={disabled}
+                >
+                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0 text-muted-foreground" />
+                  <span className="flex-1">{formatLocation(result)}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {showResults && results.length === 0 && !isSearching && (
+            <p className="text-sm text-muted-foreground px-3 py-2">
+              No locations found. Try a different search term.
+            </p>
+          )}
+
+          {value && (
+            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+              <MapPin className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+              <span className="text-sm flex-1">{value}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleClear}
+                disabled={disabled}
+                className="h-6 px-2"
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            </div>
+          )}
+        </TabsContent>
+        
+        <TabsContent value="manual" className="mt-4">
+          <Input
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Enter location manually..."
+            disabled={disabled}
+          />
+          <p className="text-xs text-muted-foreground mt-2">
+            Enter any location text. For better data quality, use Search mode.
+          </p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/admin/ManufacturerForm.tsx

@@ -12,9 +12,8 @@ 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';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitManufacturerCreation, submitManufacturerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -59,7 +58,6 @@ interface ManufacturerFormProps {
 
 export function ManufacturerForm({ onSubmit, onCancel, initialData }: ManufacturerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -200,14 +198,13 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
-                options={headquarters}
-                value={watch('headquarters_location')}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
+              <HeadquartersLocationInput
+                value={watch('headquarters_location') || ''}
+                onChange={(value) => setValue('headquarters_location', value)}
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/OperatorForm.tsx

@@ -12,9 +12,8 @@ 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 { FerrisWheel, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitOperatorCreation, submitOperatorUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface OperatorFormProps {
 
 export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
-                options={headquarters}
-                value={watch('headquarters_location')}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
+              <HeadquartersLocationInput
+                value={watch('headquarters_location') || ''}
+                onChange={(value) => setValue('headquarters_location', value)}
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/ParkForm.tsx

@@ -29,6 +29,7 @@ import type { TempCompanyData } from '@/types/company';
 import { LocationSearch } from './LocationSearch';
 import { OperatorForm } from './OperatorForm';
 import { PropertyOwnerForm } from './PropertyOwnerForm';
+import { Checkbox } from '@/components/ui/checkbox';
 
 const parkSchema = z.object({
   name: z.string().min(1, 'Park name is required'),
@@ -55,8 +56,8 @@ const parkSchema = z.object({
   website_url: z.string().url().optional().or(z.literal('')),
   phone: z.string().optional(),
   email: z.string().email().optional().or(z.literal('')),
-  operator_id: z.string().uuid().optional(),
-  property_owner_id: z.string().uuid().optional(),
+  operator_id: z.string().uuid().optional().or(z.literal('')).transform(val => val || undefined),
+  property_owner_id: z.string().uuid().optional().or(z.literal('')).transform(val => val || undefined),
   images: z.object({
     uploaded: z.array(z.object({
       url: z.string(),
@@ -148,6 +149,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
   const [tempNewPropertyOwner, setTempNewPropertyOwner] = useState<TempCompanyData | null>(null);
   const [isPropertyOwnerModalOpen, setIsPropertyOwnerModalOpen] = useState(false);
 
+  // Operator is Owner checkbox state
+  const [operatorIsOwner, setOperatorIsOwner] = useState<boolean>(
+    !!(initialData?.operator_id && initialData?.property_owner_id && 
+       initialData?.operator_id === initialData?.property_owner_id)
+  );
+
   // Fetch data
   const { operators, loading: operatorsLoading } = useOperators();
   const { propertyOwners, loading: ownersLoading } = usePropertyOwners();
@@ -178,6 +185,14 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
     }
   });
 
+  // Sync property owner with operator when checkbox is enabled
+  useEffect(() => {
+    if (operatorIsOwner && selectedOperatorId) {
+      setSelectedPropertyOwnerId(selectedOperatorId);
+      setValue('property_owner_id', selectedOperatorId);
+    }
+  }, [operatorIsOwner, selectedOperatorId, setValue]);
+
 
   const handleFormSubmit = async (data: ParkFormData) => {    
     try {
@@ -198,10 +213,15 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
         submissionContent.park.property_owner_id = null;
       }
 
+      const finalOperatorId = tempNewOperator ? undefined : (selectedOperatorId || undefined);
+      const finalPropertyOwnerId = operatorIsOwner 
+        ? finalOperatorId 
+        : (tempNewPropertyOwner ? undefined : (selectedPropertyOwnerId || undefined));
+
       await onSubmit({
         ...data,
-        operator_id: tempNewOperator ? undefined : (selectedOperatorId || undefined),
-        property_owner_id: tempNewPropertyOwner ? undefined : (selectedPropertyOwnerId || undefined),
+        operator_id: finalOperatorId,
+        property_owner_id: finalPropertyOwnerId,
         _compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
       });
       
@@ -363,6 +383,24 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
           <div className="space-y-4">
             <h3 className="text-lg font-semibold">Operator & Property Owner</h3>
             
+            <div className="flex items-center space-x-2 mb-4">
+              <Checkbox
+                id="operator-is-owner"
+                checked={operatorIsOwner}
+                onCheckedChange={(checked) => {
+                  setOperatorIsOwner(checked as boolean);
+                  if (checked && selectedOperatorId) {
+                    setSelectedPropertyOwnerId(selectedOperatorId);
+                    setValue('property_owner_id', selectedOperatorId);
+                    setTempNewPropertyOwner(null);
+                  }
+                }}
+              />
+              <Label htmlFor="operator-is-owner" className="text-sm font-normal cursor-pointer">
+                Operator is also the property owner
+              </Label>
+            </div>
+            
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {/* Operator Column */}
               <div className="space-y-2">
@@ -384,10 +422,11 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
                 ) : (
                   <Combobox
                     options={operators}
-                    value={watch('operator_id')}
+                    value={watch('operator_id') || ''}
                     onValueChange={(value) => {
-                      setValue('operator_id', value);
-                      setSelectedOperatorId(value);
+                      const cleanValue = value || undefined;
+                      setValue('operator_id', cleanValue);
+                      setSelectedOperatorId(cleanValue || '');
                     }}
                     placeholder="Select operator"
                     searchPlaceholder="Search operators..."
@@ -411,6 +450,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
               </div>
 
               {/* Property Owner Column */}
+              {!operatorIsOwner && (
               <div className="space-y-2">
                 <Label>Property Owner</Label>
                 
@@ -430,10 +470,11 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
                 ) : (
                   <Combobox
                     options={propertyOwners}
-                    value={watch('property_owner_id')}
+                    value={watch('property_owner_id') || ''}
                     onValueChange={(value) => {
-                      setValue('property_owner_id', value);
-                      setSelectedPropertyOwnerId(value);
+                      const cleanValue = value || undefined;
+                      setValue('property_owner_id', cleanValue);
+                      setSelectedPropertyOwnerId(cleanValue || '');
                     }}
                     placeholder="Select property owner"
                     searchPlaceholder="Search property owners..."
@@ -455,6 +496,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
                   </Button>
                 )}
               </div>
+              )}
             </div>
           </div>
 

src/components/admin/PropertyOwnerForm.tsx

@@ -12,9 +12,8 @@ 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';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitPropertyOwnerCreation, submitPropertyOwnerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface PropertyOwnerFormProps {
 
 export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyOwnerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
-                options={headquarters}
-                value={watch('headquarters_location')}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
+              <HeadquartersLocationInput
+                value={watch('headquarters_location') || ''}
+                onChange={(value) => setValue('headquarters_location', value)}
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/index.ts

@@ -1,6 +1,7 @@
 // Admin components barrel exports
 export { AdminPageLayout } from './AdminPageLayout';
 export { DesignerForm } from './DesignerForm';
+export { HeadquartersLocationInput } from './HeadquartersLocationInput';
 export { LocationSearch } from './LocationSearch';
 export { ManufacturerForm } from './ManufacturerForm';
 export { MarkdownEditor } from './MarkdownEditor';

src/lib/entityValidationSchemas.ts

@@ -46,8 +46,8 @@ export const parkValidationSchema = z.object({
     if (!val || val === '') return true;
     return z.string().email().safeParse(val).success;
   }, 'Invalid email format'),
-  operator_id: z.string().uuid().optional().nullable(),
-  property_owner_id: z.string().uuid().optional().nullable(),
+  operator_id: z.string().uuid().optional().nullable().or(z.literal('')).transform(val => val || undefined),
+  property_owner_id: z.string().uuid().optional().nullable().or(z.literal('')).transform(val => val || undefined),
   banner_image_id: z.string().optional(),
   banner_image_url: z.string().optional(),
   card_image_id: z.string().optional(),