Add role-based filtering and imporve code

frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Button } from '../../../ui/Button';
 import { Input } from '../../../ui/Input';
 import { useRegisterBakery } from '../../../../api/hooks/tenant';
 import { BakeryRegistration } from '../../../../api/types/tenant';
+import { nominatimService, NominatimResult } from '../../../../api/services/nominatim';
+import { debounce } from 'lodash';
 
 interface RegisterTenantStepProps {
   onNext: () => void;
@@ -27,14 +29,51 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
   });
 
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [addressSuggestions, setAddressSuggestions] = useState<NominatimResult[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
   const registerBakery = useRegisterBakery();
 
+  // Debounced address search
+  const searchAddress = useCallback(
+    debounce(async (query: string) => {
+      if (query.length < 3) {
+        setAddressSuggestions([]);
+        return;
+      }
+
+      setIsSearching(true);
+      try {
+        const results = await nominatimService.searchAddress(query);
+        setAddressSuggestions(results);
+        setShowSuggestions(true);
+      } catch (error) {
+        console.error('Address search failed:', error);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500),
+    []
+  );
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      searchAddress.cancel();
+    };
+  }, [searchAddress]);
+
   const handleInputChange = (field: keyof BakeryRegistration, value: string) => {
     setFormData(prev => ({
       ...prev,
       [field]: value
     }));
-    
+
+    // Trigger address search when address field changes
+    if (field === 'address') {
+      searchAddress(value);
+    }
+
     if (errors[field]) {
       setErrors(prev => ({
         ...prev,
@@ -43,6 +82,20 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
     }
   };
 
+  const handleAddressSelect = (result: NominatimResult) => {
+    const parsed = nominatimService.parseAddress(result);
+
+    setFormData(prev => ({
+      ...prev,
+      address: parsed.street,
+      city: parsed.city,
+      postal_code: parsed.postalCode,
+    }));
+
+    setShowSuggestions(false);
+    setAddressSuggestions([]);
+  };
+
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
 
@@ -121,15 +174,43 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
           isRequired
         />
 
-        <div className="md:col-span-2">
+        <div className="md:col-span-2 relative">
           <Input
             label="Dirección"
-            placeholder="Calle Principal 123, Ciudad, Provincia"
+            placeholder="Calle Principal 123, Madrid"
             value={formData.address}
             onChange={(e) => handleInputChange('address', e.target.value)}
+            onFocus={() => {
+              if (addressSuggestions.length > 0) {
+                setShowSuggestions(true);
+              }
+            }}
+            onBlur={() => {
+              setTimeout(() => setShowSuggestions(false), 200);
+            }}
             error={errors.address}
             isRequired
           />
+          {isSearching && (
+            <div className="absolute right-3 top-10 text-gray-400">
+              Buscando...
+            </div>
+          )}
+          {showSuggestions && addressSuggestions.length > 0 && (
+            <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+              {addressSuggestions.map((result) => (
+                <div
+                  key={result.place_id}
+                  className="px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0"
+                  onClick={() => handleAddressSelect(result)}
+                >
+                  <div className="text-sm font-medium text-gray-900">
+                    {nominatimService.formatAddress(result)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
 
         <Input