How to Create a Crowd-Sourced Incident Reporting Feature in FlutterFlow

Create an incidents collection with fields: userId (Reference, the reporter), type (String: pothole/graffiti/streetlight/accident/flooding/other), description (String), lat (Double), lng (Double), address (String, reverse geocoded), photoUrls (Array of Strings), status (String: reported/acknowledged/inProgress/resolved), priority (String: low/medium/high, derived from confirmCount), confirmCount (Int, number of Me Too upvotes), assignedDepartment (String, nullable), adminNotes (String, nullable), createdAt (Timestamp), resolvedAt (Timestamp, nullable). Create an incident_confirmations subcollection: incidents/{id}/confirmations with userId (Reference) to track who confirmed. This prevents duplicate upvotes. Add a Firestore composite index on status + createdAt for the admin dashboard query.

Create a ReportIncidentPage. On page load, get the current user's location using FlutterFlow's Get Current Location action and store lat/lng in Page State. Display a mini Google Map centered on the user's location with a draggable marker so they can adjust the exact spot. Below the map, add an incident type selector: a GridView of 6 tappable Container cards, each with an icon and label (Pothole, Graffiti, Streetlight, Accident, Flooding, Other). Selected type gets a blue border. Add a description TextField (multiline, max 500 chars). Add a photo section with FlutterFlowUploadButton supporting multiple images (up to 3). On Submit, create the incidents doc with the location, type, photos, status as reported, confirmCount 0, and the current user's ID. Show a success SnackBar and navigate to the map view.

Create an IncidentMapPage with a FlutterFlowGoogleMap filling most of the screen. Query all incidents where status is not resolved (or add a toggle to show resolved). For each incident, add a map marker at lat/lng with a color based on type: red for accident, orange for pothole, yellow for streetlight, blue for flooding, purple for graffiti, grey for other. Tapping a marker shows a BottomSheet with the incident details: type icon and label, description (first 100 chars), photo thumbnail (first photo), status badge (color-coded: grey=reported, blue=acknowledged, yellow=inProgress, green=resolved), confirmCount with a thumbs-up icon, and a View Details button. The View Details button navigates to IncidentDetailPage.

On the IncidentDetailPage, below the full incident details (photos, description, map, status), add a Me Too button. Before showing the button, query the confirmations subcollection for a document with the current user's ID. If found, show 'You confirmed this' in grey instead of the button. On button tap, create a confirmation doc in the subcollection with the current userId and timestamp. Increment the incident's confirmCount using FieldValue.increment(1). If confirmCount reaches 5, update priority to medium. If it reaches 15, update priority to high. Display the confirmCount prominently: 'X people confirmed this incident'. A Cloud Function can optionally send a notification to the admin when confirmCount crosses threshold values.

Create an AdminDashboardPage (protected by role check on page load). Display a TabBar with tabs: New (status reported), Active (acknowledged or inProgress), and Resolved. Each tab shows a ListView querying incidents by status, ordered by priority desc then createdAt asc (highest priority, oldest first). Each list item shows: type icon, address, description preview, confirmCount badge, and time since reported. Tapping opens the incident with admin controls: a DropDown to change status (acknowledged/inProgress/resolved), a DropDown for assignedDepartment (Roads, Parks, Utilities, Safety), and a TextField for adminNotes. On status change, update the incident doc. When marking resolved, set resolvedAt to now. Importantly, the admin view shows the reporter userId for follow-up, but public views never display reporter identity.