The event creation/edit wizard's step model — a conditional 6-or-7-step flow depending on whether staff management applies.

// src/components/forms/events/EventForm.tsx

// lines 567–601 (stepper state)

// Stepper state:
//  1 = Basic Info         (name, date, time, status, type)
//  2 = Event Details      (speakers, description)
//  3 = Location Criteria  (area + 5 AI criteria)
//  4 = Pick Location      (AI map with 10 pins)
//  5 = Location Image     (top 8 photos for selected pin)
//  6 = Location & Venue   (name, type, address, contact, capacity, services)
//  7 = Manage Staff       (optional, editing only)

const BASE_STEPS = 6;
const [currentStep, setCurrentStep] = useState<number>(1);
const totalSteps = includeManagementStep ? BASE_STEPS + 1 : BASE_STEPS;

const steps = [
  { label: "Basic Info" },
  { label: "Event Details" },
  { label: "Location Criteria" },
  { label: "Pick Location" },
  { label: "Location Image" },
  { label: "Location & Venue" },
  ...(includeManagementStep ? [{ label: "Manage Staff" }] : []),
];

// Google Places search state
const [searchQuery, setSearchQuery] = useState("");
const [searching, setSearching] = useState(false);
const [placeResults, setPlaceResults] = useState<PlaceResult[]>([]);
const [selectedPlace, setSelectedPlace] = useState<PlaceResult | null>(null);
const [placePhotos, setPlacePhotos] = useState<PlacePhoto[]>([]);
const [searchError, setSearchError] = useState<string | null>(null);
 
The "Manage Staff" step only appears when editing an existing event — a brand-new event has no staff to manage yet.
// src/components/forms/events/EventForm.tsx

// lines 567–601 (stepper state)

// Stepper state:
//  1 = Basic Info         (name, date, time, status, type)
//  2 = Event Details      (speakers, description)
//  3 = Location Criteria  (area + 5 AI criteria)
//  4 = Pick Location      (AI map with 10 pins)
//  5 = Location Image     (top 8 photos for selected pin)
//  6 = Location & Venue   (name, type, address, contact, capacity, services)
//  7 = Manage Staff       (optional, editing only)

const BASE_STEPS = 6;
const [currentStep, setCurrentStep] = useState<number>(1);
const totalSteps = includeManagementStep ? BASE_STEPS + 1 : BASE_STEPS;

const steps = [
  { label: "Basic Info" },
  { label: "Event Details" },
  { label: "Location Criteria" },
  { label: "Pick Location" },
  { label: "Location Image" },
  { label: "Location & Venue" },
  ...(includeManagementStep ? [{ label: "Manage Staff" }] : []),
];

// Google Places search state
const [searchQuery, setSearchQuery] = useState("");
const [searching, setSearching] = useState(false);
const [placeResults, setPlaceResults] = useState<PlaceResult[]>([]);
const [selectedPlace, setSelectedPlace] = useState<PlaceResult | null>(null);
const [placePhotos, setPlacePhotos] = useState<PlacePhoto[]>([]);
const [searchError, setSearchError] = useState<string | null>(null);
 
// src/components/forms/events/EventForm.tsx

// lines 567–601 (stepper state)

// Stepper state:
//  1 = Basic Info         (name, date, time, status, type)
//  2 = Event Details      (speakers, description)
//  3 = Location Criteria  (area + 5 AI criteria)
//  4 = Pick Location      (AI map with 10 pins)
//  5 = Location Image     (top 8 photos for selected pin)
//  6 = Location & Venue   (name, type, address, contact, capacity, services)
//  7 = Manage Staff       (optional, editing only)

const BASE_STEPS = 6;
const [currentStep, setCurrentStep] = useState<number>(1);
const totalSteps = includeManagementStep ? BASE_STEPS + 1 : BASE_STEPS;

const steps = [
  { label: "Basic Info" },
  { label: "Event Details" },
  { label: "Location Criteria" },
  { label: "Pick Location" },
  { label: "Location Image" },
  { label: "Location & Venue" },
  ...(includeManagementStep ? [{ label: "Manage Staff" }] : []),
];

// Google Places search state
const [searchQuery, setSearchQuery] = useState("");
const [searching, setSearching] = useState(false);
const [placeResults, setPlaceResults] = useState<PlaceResult[]>([]);
const [selectedPlace, setSelectedPlace] = useState<PlaceResult | null>(null);
const [placePhotos, setPlacePhotos] = useState<PlacePhoto[]>([]);
const [searchError, setSearchError] = useState<string | null>(null);