🌳 Orchard Registration Form Demo

Complete form for adding new orchards with location selection and photo upload

✨ Features

  • ✓Complete input fields (name, description, owner, area)
  • ✓Address and GPS location input
  • ✓"Use My Location" button for quick GPS
  • ✓MapLocationPicker integration
  • ✓Photo upload with preview
  • ✓Form validation (required fields)
  • ✓Micro locations (comma-separated)
  • ✓Submit with loading state

➕ Add New Orchard

Fill in the information to register a new orchard

📝 Basic Information

Separate multiple locations with commas

📍 Location

Click to automatically set the map to your current GPS location

Loading map...

📷 Photo

📝 How to Use

  1. 1.Fill in the basic information (name, description, owner, area)
  2. 2.Enter the address and select location on the map
  3. 3.Use "Use My Current Location" button for quick GPS positioning
  4. 4.Upload a photo of the orchard (optional, max 5MB)
  5. 5.Add micro locations separated by commas (optional)
  6. 6.Click "Create Orchard" to submit the form

💻 Code Example

import OrchardForm from '@/app/components/webapp/OrchardForm';

// Basic usage
<OrchardForm
  onSuccess={(orchard) => console.log('Created:', orchard)}
  onCancel={() => router.back()}
/>

// Edit mode
<OrchardForm
  initialData={existingOrchard}
  isEdit={true}
  onSuccess={(orchard) => console.log('Updated:', orchard)}
/>