Title: Openai/693f3576-eaf4-8011-9c02-8476c83275fd - freem

URL Source: https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd

Markdown Content:
_This conversation was exported from ChatGPT_[[1]](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_note-1)

## gpt-5-2-thinking[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=1 "Edit section: gpt-5-2-thinking")

### User: Build me a mobile app.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=2 "Edit section: User: Build me a mobile app.")

Build me a mobile app. The app will be called PBYSA Umpire Check-In. The purpose is for umpires to be able to submit that they were working. They should be able to create an account and login. Once logged in it will automatically fill in the date and time and it will ask them the following questions; What division? Are you the only umpire?

### Assistant: Below is a solid MVP build for PBYSA Umpire Check-In: account creation + login + a “check-in” form that auto-fills date…[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=3 "Edit section: Assistant: Below is a solid MVP build for PBYSA Umpire Check-In: account creation + login + a “check-in” form that auto-fills date…")

Below is a solid MVP build for PBYSA Umpire Check-In: account creation + login + a “check-in” form that auto-fills date/time and asks:

*   What division?
*   Are you the only umpire?

I’ll give you (1) the app flow/spec, (2) the backend/data model, and (3) working starter code using React Native (Expo) + Firebase (fastest way to get Auth + database without running your own server).

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=4 "Edit section: ###")

1.   Welcome - Buttons: Log In / Create Account
2.   Create Account - Email + password
3.   Log In - Email + password
4.   Check-In (main screen after login) - Auto-filled Date and Time (shows current local time) - Division (dropdown or text input) - Only umpire? (Yes/No switch) - Submit - Optional: list of your recent check-ins
5.   Settings - Log out

##### - Must be logged in to submit.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=5 "Edit section: - Must be logged in to submit.")

*   On submit, save: - userId, email - timestamp (server-side if possible) - division - onlyUmpire (true/false)

#### Collection: checkins[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=6 "Edit section: Collection: checkins")

Each document:

{
 "userId": "abc123",
 "email": "ump@example.com",
 "division": "10U",
 "onlyUmpire": true,
 "createdAt": "server timestamp"
}

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=7 "Edit section: ###")

*   Install Node.js
*   Install Expo CLI (optional; Expo also works via npx)
*   Create a Firebase project (free tier is fine) - Enable Authentication → Email/Password - Create Firestore Database

=====

npx create-expo-app pbysa-umpire-checkin =====
cd pbysa-umpire-checkin
npm install firebase

##### Create src/firebase.js:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=8 "Edit section: Create src/firebase.js:")

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_PROJECT.firebaseapp.com",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_PROJECT.appspot.com",
 messagingSenderId: "YOUR_SENDER_ID",
 appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

##### Replace App.js with this:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=9 "Edit section: Replace App.js with this:")

import React, { useEffect, useMemo, useState } from "react";
import { SafeAreaView, View, Text, TextInput, Pressable, Switch, StyleSheet, Alert } from "react-native";
import { onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";
import { auth, db } from "./src/firebase";

function Button({ title, onPress, variant = "primary" }) {
 return (
 <Pressable
 onPress={onPress}
 style={[styles.button, variant === "secondary" && styles.buttonSecondary]}
 >
 <Text style={[styles.buttonText, variant === "secondary" && styles.buttonTextSecondary]}>
 {title}
 </Text>
 </Pressable>
 );
}

function AuthScreen({ mode, onSwitchMode }) {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");

 const isSignup = mode === "signup";

 const handleSubmit = async () => {
 if (!email.trim() || !password) {
 Alert.alert("Missing info", "Please enter email and password.");
 return;
 }

 try {
 if (isSignup) {
 await createUserWithEmailAndPassword(auth, email.trim(), password);
 } else {
 await signInWithEmailAndPassword(auth, email.trim(), password);
 }
 } catch (e) {
 Alert.alert("Auth error", e?.message ?? "Something went wrong.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>{isSignup ? "Create Account" : "Log In"}</Text>

 <View style={styles.card}>
 <Text style={styles.label}>Email</Text>
 <TextInput
 autoCapitalize="none"
 keyboardType="email-address"
 value={email}
 onChangeText={setEmail}
 placeholder="you@example.com"
 style={styles.input}
 />

 <Text style={styles.label}>Password</Text>
 <TextInput
 secureTextEntry
 value={password}
 onChangeText={setPassword}
 placeholder="••••••••"
 style={styles.input}
 />

 <Button title={isSignup ? "Create Account" : "Log In"} onPress={handleSubmit} />

 <View style={{ height: 10 }} />

 <Button
 title={isSignup ? "Already have an account? Log in" : "New here? Create an account"}
 onPress={onSwitchMode}
 variant="secondary"
 />
 </View>

 <Text style={styles.footer}>Umpires can submit a check-in to confirm they worked.</Text>
 </SafeAreaView>
 );
}

function CheckInScreen({ user }) {
 const [division, setDivision] = useState("");
 const [onlyUmpire, setOnlyUmpire] = useState(false);
 const [submitting, setSubmitting] = useState(false);

 const now = useMemo(() => new Date(), []);
 const [clock, setClock] = useState(new Date());

 useEffect(() => {
 const t = setInterval(() => setClock(new Date()), 1000);
 return () => clearInterval(t);
 }, []);

 const formattedDate = clock.toLocaleDateString();
 const formattedTime = clock.toLocaleTimeString();

 const submit = async () => {
 if (!division.trim()) {
 Alert.alert("Missing division", "Please enter the division.");
 return;
 }

 setSubmitting(true);
 try {
 await addDoc(collection(db, "checkins"), {
 userId: user.uid,
 email: user.email ?? "",
 division: division.trim(),
 onlyUmpire,
 // server timestamp ensures consistency and prevents device clock issues
 createdAt: serverTimestamp(),
 // optional: also store device time for display/debug
 deviceDate: formattedDate,
 deviceTime: formattedTime,
 });

 Alert.alert("Submitted!", "Your check-in has been recorded.");
 setDivision("");
 setOnlyUmpire(false);
 } catch (e) {
 Alert.alert("Submit error", e?.message ?? "Something went wrong submitting your check-in.");
 } finally {
 setSubmitting(false);
 }
 };

 const logout = async () => {
 try {
 await signOut(auth);
 } catch (e) {
 Alert.alert("Logout error", e?.message ?? "Could not log out.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>Welcome, {user.email}</Text>

 <View style={styles.card}>
 <Text style={styles.label}>Date</Text>
 <Text style={styles.readonly}>{formattedDate}</Text>

 <Text style={styles.label}>Time</Text>
 <Text style={styles.readonly}>{formattedTime}</Text>

 <Text style={styles.label}>What division?</Text>
 <TextInput
 value={division}
 onChangeText={setDivision}
 placeholder="Example: 8U, 10U, Majors..."
 style={styles.input}
 />

 <View style={styles.row}>
 <View style={{ flex: 1 }}>
 <Text style={styles.label}>Are you the only umpire?</Text>
 <Text style={styles.hint}>{onlyUmpire ? "Yes" : "No"}</Text>
 </View>
 <Switch value={onlyUmpire} onValueChange={setOnlyUmpire} />
 </View>

 <Button title={submitting ? "Submitting..." : "Submit Check-In"} onPress={submit} />
 <View style={{ height: 10 }} />
 <Button title="Log Out" onPress={logout} variant="secondary" />
 </View>

 <Text style={styles.footer}>
 Check-ins automatically include date/time and your account email.
 </Text>
 </SafeAreaView>
 );
}

export default function App() {
 const [user, setUser] = useState(null);
 const [mode, setMode] = useState("login"); // "login" | "signup"
 const [loadingAuth, setLoadingAuth] = useState(true);

 useEffect(() => {
 const unsub = onAuthStateChanged(auth, (u) => {
 setUser(u);
 setLoadingAuth(false);
 });
 return () => unsub();
 }, []);

 if (loadingAuth) {
 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>Loading…</Text>
 </SafeAreaView>
 );
 }

 if (!user) {
 return (
 <AuthScreen
 mode={mode}
 onSwitchMode={() => setMode((m) => (m === "login" ? "signup" : "login"))}
 />
 );
 }

 return <CheckInScreen user={user} />;
}

const styles = StyleSheet.create({
 container: { flex: 1, padding: 18, backgroundColor: "#fff" },
 title: { fontSize: 26, fontWeight: "700", marginTop: 8 },
 subtitle: { fontSize: 16, marginTop: 6, marginBottom: 14, color: "#333" },
 card: {
 borderWidth: 1,
 borderColor: "#eee",
 borderRadius: 14,
 padding: 16,
 backgroundColor: "#fafafa",
 },
 label: { fontSize: 14, fontWeight: "600", marginTop: 10, marginBottom: 6 },
 hint: { fontSize: 12, color: "#666" },
 input: {
 borderWidth: 1,
 borderColor: "#ddd",
 borderRadius: 10,
 paddingHorizontal: 12,
 paddingVertical: 10,
 backgroundColor: "#fff",
 },
 readonly: { fontSize: 16, paddingVertical: 6 },
 row: { flexDirection: "row", alignItems: "center", marginTop: 10 },
 button: {
 marginTop: 16,
 borderRadius: 12,
 paddingVertical: 12,
 alignItems: "center",
 backgroundColor: "#111",
 },
 buttonSecondary: { backgroundColor: "#fff", borderWidth: 1, borderColor: "#111" },
 buttonText: { color: "#fff", fontWeight: "700" },
 buttonTextSecondary: { color: "#111" },
 footer: { marginTop: 14, color: "#666" },
});

=====

npx expo start =====

Scan the QR code with Expo Go (iOS/Android) to test.

#### In Firebase → Firestore → Rules, start with:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=10 "Edit section: In Firebase → Firestore → Rules, start with:")

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
 match /checkins/{docId} {
 allow create: if request.auth != null
 && request.resource.data.userId == request.auth.uid;

 // Optional: allow reading only your own records
 allow read: if request.auth != null
 && resource.data.userId == request.auth.uid;
 }
 }
}

#### - Division as a dropdown list you control (8U/10U/12U/etc.)[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=11 "Edit section: - Division as a dropdown list you control (8U/10U/12U/etc.)")

*   Add Field / Location, Game ID, Partner name (if not only umpire)
*   Admin view for board members to export check-ins (CSV)
*   Prevent duplicate check-ins within a time window (e.g., 2 hours)
*   Push confirmation + “history” screen

If you tell me iOS, Android, or both, and whether PBYSA wants admins to see all check-ins, I can extend this into:

*   an admin login role,
*   an admin dashboard screen (inside the app),
*   and/or a web admin panel for exporting payroll/assignments.

### User: Make divisions a dropdown list.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=12 "Edit section: User: Make divisions a dropdown list.")

Make divisions a dropdown list. Division are Teeball, 8U, 10U, 12U, and 15U. Add Field which is 1 through 8. Add a drop down asking if they are a solo umpire and the answer can be yes or no. Enable location and ensure they are within 5,000 feet of 2020 Bauer Road, Pensacola, FL 32506. Make for both iOS and Android. PBYSA wants admins to see all check-ins.

### Assistant: Got it.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=13 "Edit section: Assistant: Got it.")

Got it. Here’s an upgraded both iOS + Android MVP using Expo (React Native) + Firebase with:

*   Division dropdown: Teeball, 8U, 10U, 12U, 15U
*   Field dropdown: 1–8
*   Solo umpire dropdown: Yes/No
*   Location enabled + distance gate: must be within 5,000 feet (~1524m) of 2020 Bauer Rd, Pensacola, FL 32506
*   Admins can see all check-ins

For the location fence, I’m using the MapQuest listing for 2020 Bauer Rd which includes coordinates (30.38448, -87.40056). MapQuest[[2]](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_note-2)

#### From your Expo project folder:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=14 "Edit section: From your Expo project folder:")

npm install firebase expo-location
npm install @react-native-picker/picker

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=15 "Edit section: ###")

users/{uid}:

{
 "email": "ump@example.com",
 "role": "umpire" // or "admin"
}

##### Each check-in document:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=16 "Edit section: Each check-in document:")

{
 "userId": "uid",
 "email": "ump@example.com",
 "division": "10U",
 "field": 3,
 "soloUmpire": "Yes",
 "createdAt": "server timestamp",
 "location": { "lat": 30.38, "lng": -87.40 },
 "distanceMeters": 412.3
}

How to make an admin: after creating the account, go to Firebase Console → Firestore → users/{uid} and set "role": "admin".

#### In Firebase → Firestore → Rules:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=17 "Edit section: In Firebase → Firestore → Rules:")

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {

 function isSignedIn() {
 return request.auth != null;
 }

 function isAdmin() {
 return isSignedIn()
 && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == "admin";
 }

 match /users/{uid} {
 allow read: if isSignedIn() && request.auth.uid == uid;
 allow create: if isSignedIn() && request.auth.uid == uid;
 allow update: if isAdmin(); // admins can promote people
 }

 match /checkins/{docId} {
 allow create: if isSignedIn()
 && request.resource.data.userId == request.auth.uid;

 // admins can read all; umpires can read their own
 allow read: if isAdmin()
 || (isSignedIn() && resource.data.userId == request.auth.uid);
 }
 }
}

#### Replace your App.js with the full version below.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=18 "Edit section: Replace your App.js with the full version below.")

import React, { useEffect, useMemo, useState } from "react";
import {
 SafeAreaView,
 View,
 Text,
 TextInput,
 Pressable,
 StyleSheet,
 Alert,
 FlatList,
 ActivityIndicator,
} from "react-native";
import { Picker } from "@react-native-picker/picker";
import * as Location from "expo-location";

import {
 onAuthStateChanged,
 createUserWithEmailAndPassword,
 signInWithEmailAndPassword,
 signOut,
} from "firebase/auth";
import {
 addDoc,
 collection,
 serverTimestamp,
 doc,
 setDoc,
 getDoc,
 query,
 orderBy,
 limit,
 onSnapshot,
 where,
} from "firebase/firestore";

import { auth, db } from "./src/firebase";

// --- Constants ---
const DIVISIONS = ["Teeball", "8U", "10U", "12U", "15U"];
const FIELDS = [1, 2, 3, 4, 5, 6, 7, 8];
const SOLO_OPTIONS = ["Yes", "No"];

// 2020 Bauer Rd, Pensacola, FL 32506 (MapQuest shows coords in URL)
const FACILITY = {
 name: "2020 Bauer Rd, Pensacola, FL 32506",
 lat: 30.38448,
 lng: -87.40056,
};

// 5,000 feet ≈ 1524 meters
const MAX_DISTANCE_METERS = 1524;

function Button({ title, onPress, variant = "primary", disabled = false }) {
 return (
 <Pressable
 onPress={disabled ? undefined : onPress}
 style={[
 styles.button,
 variant === "secondary" && styles.buttonSecondary,
 disabled && styles.buttonDisabled,
 ]}
 >
 <Text
 style={[
 styles.buttonText,
 variant === "secondary" && styles.buttonTextSecondary,
 disabled && styles.buttonTextDisabled,
 ]}
 >
 {title}
 </Text>
 </Pressable>
 );
}

function milesFromMeters(m) {
 return m / 1609.344;
}

function formatWhen(ts) {
 if (!ts) return "—";
 const d = ts.toDate ? ts.toDate() : new Date(ts);
 return d.toLocaleString();
}

// --- Auth Screen ---
function AuthScreen({ mode, onSwitchMode }) {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");

 const isSignup = mode === "signup";

 const handleSubmit = async () => {
 if (!email.trim() || !password) {
 Alert.alert("Missing info", "Please enter email and password.");
 return;
 }

 try {
 if (isSignup) {
 const cred = await createUserWithEmailAndPassword(auth, email.trim(), password);

 // Create user profile with default role
 await setDoc(doc(db, "users", cred.user.uid), {
 email: cred.user.email ?? email.trim(),
 role: "umpire",
 createdAt: serverTimestamp(),
 });
 } else {
 await signInWithEmailAndPassword(auth, email.trim(), password);
 }
 } catch (e) {
 Alert.alert("Auth error", e?.message ?? "Something went wrong.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>{isSignup ? "Create Account" : "Log In"}</Text>

 <View style={styles.card}>
 <Text style={styles.label}>Email</Text>
 <TextInput
 autoCapitalize="none"
 keyboardType="email-address"
 value={email}
 onChangeText={setEmail}
 placeholder="you@example.com"
 style={styles.input}
 />

 <Text style={styles.label}>Password</Text>
 <TextInput
 secureTextEntry
 value={password}
 onChangeText={setPassword}
 placeholder="••••••••"
 style={styles.input}
 />

 <Button title={isSignup ? "Create Account" : "Log In"} onPress={handleSubmit} />

 <View style={{ height: 10 }} />

 <Button
 title={isSignup ? "Already have an account? Log in" : "New here? Create an account"}
 onPress={onSwitchMode}
 variant="secondary"
 />
 </View>

 <Text style={styles.footer}>
 Check-ins require location and must be within 5,000 ft of the facility.
 </Text>
 </SafeAreaView>
 );
}

// --- Check-In Screen (Umpire) ---
function UmpireCheckInScreen({ user, role }) {
 const [division, setDivision] = useState(DIVISIONS[0]);
 const [field, setField] = useState(FIELDS[0]);
 const [soloUmpire, setSoloUmpire] = useState(SOLO_OPTIONS[0]);

 const [locationStatus, setLocationStatus] = useState("unknown"); // unknown | granted | denied
 const [checkingLocation, setCheckingLocation] = useState(false);
 const [submitting, setSubmitting] = useState(false);

 const [myCheckins, setMyCheckins] = useState([]);

 useEffect(() => {
 const qy = query(
 collection(db, "checkins"),
 where("userId", "==", user.uid),
 orderBy("createdAt", "desc"),
 limit(20)
 );

 const unsub = onSnapshot(qy, (snap) => {
 setMyCheckins(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
 });

 return () => unsub();
 }, [user.uid]);

 const requestLocation = async () => {
 setCheckingLocation(true);
 try {
 const { status } = await Location.requestForegroundPermissionsAsync();
 if (status !== "granted") {
 setLocationStatus("denied");
 Alert.alert(
 "Location required",
 "Please enable location permissions to submit a check-in."
 );
 return;
 }
 setLocationStatus("granted");
 } finally {
 setCheckingLocation(false);
 }
 };

 useEffect(() => {
 requestLocation();
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);

 const getDistanceToFacilityMeters = async () => {
 const loc = await Location.getCurrentPositionAsync({
 accuracy: Location.Accuracy.Highest,
 });

 const dist = Location.distance(
 { latitude: loc.coords.latitude, longitude: loc.coords.longitude },
 { latitude: FACILITY.lat, longitude: FACILITY.lng }
 );

 return {
 distanceMeters: dist,
 coords: { lat: loc.coords.latitude, lng: loc.coords.longitude },
 };
 };

 const submit = async () => {
 if (locationStatus !== "granted") {
 Alert.alert("Location required", "Please enable location and try again.");
 return;
 }

 setSubmitting(true);
 try {
 const { distanceMeters, coords } = await getDistanceToFacilityMeters();

 if (distanceMeters > MAX_DISTANCE_METERS) {
 Alert.alert(
 "Not at the facility",
 <code>You must be within 5,000 feet of ${FACILITY.name}.\n\nYou're about ${milesFromMeters(
 distanceMeters
 ).toFixed(2)} miles away.</code>
 );
 return;
 }

 await addDoc(collection(db, "checkins"), {
 userId: user.uid,
 email: user.email ?? "",
 division,
 field: Number(field),
 soloUmpire,
 createdAt: serverTimestamp(),
 location: coords,
 distanceMeters,
 });

 Alert.alert("Submitted!", "Your check-in has been recorded.");
 } catch (e) {
 Alert.alert("Submit error", e?.message ?? "Something went wrong submitting your check-in.");
 } finally {
 setSubmitting(false);
 }
 };

 const logout = async () => {
 try {
 await signOut(auth);
 } catch (e) {
 Alert.alert("Logout error", e?.message ?? "Could not log out.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>
 {user.email} • {role}
 </Text>

 <View style={styles.card}>
 <Text style={styles.label}>What division?</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={division} onValueChange={(v) => setDivision(v)}>
 {DIVISIONS.map((d) => (
 <Picker.Item key={d} label={d} value={d} />
 ))}
 </Picker>
 </View>

 <Text style={styles.label}>Field</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={field} onValueChange={(v) => setField(v)}>
 {FIELDS.map((f) => (
 <Picker.Item key={String(f)} label={String(f)} value={f} />
 ))}
 </Picker>
 </View>

 <Text style={styles.label}>Solo umpire?</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={soloUmpire} onValueChange={(v) => setSoloUmpire(v)}>
 {SOLO_OPTIONS.map((o) => (
 <Picker.Item key={o} label={o} value={o} />
 ))}
 </Picker>
 </View>

 <Button
 title={
 checkingLocation
 ? "Checking location…"
 : submitting
 ? "Submitting…"
 : "Submit Check-In"
 }
 onPress={submit}
 disabled={checkingLocation || submitting}
 />

 <View style={{ height: 10 }} />
 <Button title="Log Out" onPress={logout} variant="secondary" />
 </View>

 <Text style={[styles.sectionTitle, { marginTop: 14 }]}>My recent check-ins</Text>
 <FlatList
 data={myCheckins}
 keyExtractor={(item) => item.id}
 ListEmptyComponent={<Text style={styles.hint}>No check-ins yet.</Text>}
 renderItem={({ item }) => (
 <View style={styles.listRow}>
 <Text style={styles.listRowTitle}>
 {item.division} • Field {item.field} • Solo: {item.soloUmpire}
 </Text>
 <Text style={styles.listRowSub}>
 {formatWhen(item.createdAt)} • {Math.round(item.distanceMeters ?? 0)}m
 </Text>
 </View>
 )}
 />
 </SafeAreaView>
 );
}

// --- Admin Screen ---
function AdminScreen({ user, role }) {
 const [allCheckins, setAllCheckins] = useState([]);
 const [loading, setLoading] = useState(true);

 useEffect(() => {
 const qy = query(collection(db, "checkins"), orderBy("createdAt", "desc"), limit(100));

 const unsub = onSnapshot(
 qy,
 (snap) => {
 setAllCheckins(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
 setLoading(false);
 },
 () => setLoading(false)
 );

 return () => unsub();
 }, []);

 const logout = async () => {
 try {
 await signOut(auth);
 } catch (e) {
 Alert.alert("Logout error", e?.message ?? "Could not log out.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>Admin • Check-Ins</Text>
 <Text style={styles.subtitle}>
 {user.email} • {role}
 </Text>

 <View style={styles.card}>
 <Text style={styles.hint}>
 Showing the most recent 100 check-ins (live updates).
 </Text>
 <View style={{ height: 10 }} />
 <Button title="Log Out" onPress={logout} variant="secondary" />
 </View>

 <Text style={[styles.sectionTitle, { marginTop: 14 }]}>All recent check-ins</Text>
 {loading ? (
 <ActivityIndicator style={{ marginTop: 12 }} />
 ) : (
 <FlatList
 data={allCheckins}
 keyExtractor={(item) => item.id}
 ListEmptyComponent={<Text style={styles.hint}>No check-ins found.</Text>}
 renderItem={({ item }) => (
 <View style={styles.listRow}>
 <Text style={styles.listRowTitle}>
 {item.email || item.userId} • {item.division} • Field {item.field} • Solo:{" "}
 {item.soloUmpire}
 </Text>
 <Text style={styles.listRowSub}>
 {formatWhen(item.createdAt)} • {Math.round(item.distanceMeters ?? 0)}m
 </Text>
 </View>
 )}
 />
 )}
 </SafeAreaView>
 );
}

// --- Main App ---
export default function App() {
 const [user, setUser] = useState(null);
 const [mode, setMode] = useState("login"); // "login" | "signup"
 const [loadingAuth, setLoadingAuth] = useState(true);
 const [role, setRole] = useState("umpire");
 const [loadingRole, setLoadingRole] = useState(false);

 useEffect(() => {
 const unsub = onAuthStateChanged(auth, async (u) => {
 setUser(u);
 setLoadingAuth(false);

 if (u) {
 setLoadingRole(true);
 try {
 const snap = await getDoc(doc(db, "users", u.uid));
 const data = snap.exists() ? snap.data() : null;
 setRole(data?.role || "umpire");
 } catch {
 setRole("umpire");
 } finally {
 setLoadingRole(false);
 }
 } else {
 setRole("umpire");
 }
 });

 return () => unsub();
 }, []);

 if (loadingAuth) {
 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>Loading…</Text>
 </SafeAreaView>
 );
 }

 if (!user) {
 return (
 <AuthScreen
 mode={mode}
 onSwitchMode={() => setMode((m) => (m === "login" ? "signup" : "login"))}
 />
 );
 }

 if (loadingRole) {
 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>PBYSA Umpire Check-In</Text>
 <Text style={styles.subtitle}>Loading profile…</Text>
 </SafeAreaView>
 );
 }

 return role === "admin" ? (
 <AdminScreen user={user} role={role} />
 ) : (
 <UmpireCheckInScreen user={user} role={role} />
 );
}

const styles = StyleSheet.create({
 container: { flex: 1, padding: 18, backgroundColor: "#fff" },
 title: { fontSize: 26, fontWeight: "700", marginTop: 8 },
 subtitle: { fontSize: 14, marginTop: 6, marginBottom: 14, color: "#333" },
 card: {
 borderWidth: 1,
 borderColor: "#eee",
 borderRadius: 14,
 padding: 16,
 backgroundColor: "#fafafa",
 },
 label: { fontSize: 14, fontWeight: "600", marginTop: 10, marginBottom: 6 },
 hint: { fontSize: 12, color: "#666" },
 input: {
 borderWidth: 1,
 borderColor: "#ddd",
 borderRadius: 10,
 paddingHorizontal: 12,
 paddingVertical: 10,
 backgroundColor: "#fff",
 },
 pickerWrap: {
 borderWidth: 1,
 borderColor: "#ddd",
 borderRadius: 10,
 overflow: "hidden",
 backgroundColor: "#fff",
 },
 button: {
 marginTop: 16,
 borderRadius: 12,
 paddingVertical: 12,
 alignItems: "center",
 backgroundColor: "#111",
 },
 buttonSecondary: { backgroundColor: "#fff", borderWidth: 1, borderColor: "#111" },
 buttonDisabled: { opacity: 0.6 },
 buttonText: { color: "#fff", fontWeight: "700" },
 buttonTextSecondary: { color: "#111" },
 buttonTextDisabled: { color: "#fff" },
 footer: { marginTop: 14, color: "#666" },
 sectionTitle: { fontSize: 14, fontWeight: "700" },
 listRow: {
 paddingVertical: 10,
 borderBottomWidth: 1,
 borderBottomColor: "#eee",
 },
 listRowTitle: { fontSize: 13, fontWeight: "600" },
 listRowSub: { fontSize: 12, color: "#666", marginTop: 2 },
});

Note: The coordinate source for the address is taken from a MapQuest page that embeds the lat/lng for “2020 Bauer Rd” in the URL. MapQuest[[3]](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_note-3)

#### Expo builds both.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=19 "Edit section: Expo builds both.")

For local testing:

npx expo start

When you’re ready to ship:

npx expo install eas-cli
npx eas build:configure
npx eas build --platform ios
npx eas build --platform android

#### This app blocks submission on the device if the user is outside the 5,000 ft radius. For stronger enforcement (so someone can’t bypass it with a hacked client), the next step is a small Firebase Cloud Function that re-checks the location server-side and rejects invalid submissions.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=20 "Edit section: This app blocks submission on the device if the user is outside the 5,000 ft radius. For stronger enforcement (so someone can’t bypass it with a hacked client), the next step is a small Firebase Cloud Function that re-checks the location server-side and rejects invalid submissions.")

If you want, I can add a simple Admin filter/search (by date, division, field, solo) and a one-tap CSV export workflow.

### User: yes please[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=21 "Edit section: User: yes please")

yes please

### Assistant: Perfect — here’s Admin filter/search + CSV export added to the app still iOS + Android via Expo.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=22 "Edit section: Assistant: Perfect — here’s Admin filter/search + CSV export added to the app still iOS + Android via Expo.")

Perfect — here’s Admin filter/search + CSV export added to the app (still iOS + Android via Expo).

For the geofence center point, we’ll keep using MapQuest’s coordinates for 2020 Bauer Rd, Pensacola, FL 32506: 30.38448, -87.40056. MapQuest[[4]](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_note-4)

====

npm install expo-file-system expo-sharing ====

(You already installed: expo-location and @react-native-picker/picker.)

#### This adds:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=23 "Edit section: This adds:")

*   Search (email contains)
*   Division filter (All + your list)
*   Field filter (All + 1–8)
*   Solo filter (All/Yes/No)
*   Date filter (Today / Last 7 days / All)
*   Export CSV (exports the currently filtered results)

=====

import * as FileSystem from "expo-file-system"; =====
import * as Sharing from "expo-sharing";

// ... keep your other imports ...

function AdminScreen({ user, role }) {
 const [allCheckins, setAllCheckins] = useState([]);
 const [loading, setLoading] = useState(true);

 // Filters
 const [searchEmail, setSearchEmail] = useState("");
 const [divisionFilter, setDivisionFilter] = useState("All");
 const [fieldFilter, setFieldFilter] = useState("All");
 const [soloFilter, setSoloFilter] = useState("All"); // All | Yes | No
 const [dateFilter, setDateFilter] = useState("All"); // All | Today | Last7

 useEffect(() => {
 // Pull a reasonable recent window to avoid huge reads; increase if needed.
 const qy = query(collection(db, "checkins"), orderBy("createdAt", "desc"), limit(500));

 const unsub = onSnapshot(
 qy,
 (snap) => {
 setAllCheckins(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
 setLoading(false);
 },
 () => setLoading(false)
 );

 return () => unsub();
 }, []);

 const filtered = useMemo(() => {
 const emailNeedle = searchEmail.trim().toLowerCase();

 const now = new Date();
 const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
 const startOfLast7 = new Date(startOfToday.getTime() - 7 '' 24 '' 60 '' 60 '' 1000);

 return allCheckins.filter((c) => {
 const email = (c.email || "").toLowerCase();

 // Email search
 if (emailNeedle && !email.includes(emailNeedle)) return false;

 // Division
 if (divisionFilter !== "All" && c.division !== divisionFilter) return false;

 // Field
 if (fieldFilter !== "All" && Number(c.field) !== Number(fieldFilter)) return false;

 // Solo
 if (soloFilter !== "All" && c.soloUmpire !== soloFilter) return false;

 // Date
 const created = c.createdAt?.toDate?.() ?? null;
 if (dateFilter === "Today") {
 if (!created || created < startOfToday) return false;
 }
 if (dateFilter === "Last7") {
 if (!created || created < startOfLast7) return false;
 }

 return true;
 });
 }, [allCheckins, searchEmail, divisionFilter, fieldFilter, soloFilter, dateFilter]);

 const toCsv = (rows) => {
 const header = [
 "createdAt",
 "email",
 "division",
 "field",
 "soloUmpire",
 "distanceMeters",
 "lat",
 "lng",
 "userId",
 "docId",
 ];

 const escape = (v) => {
 const s = String(v ?? "");
 // CSV escape: wrap in quotes if contains comma, quote, or newline
 if (/[",\n]/.test(s)) return <code>"${s.replace(/"/g, '""')}"</code>;
 return s;
 };

 const lines = [header.join(",")];

 for (const c of rows) {
 const created = c.createdAt?.toDate?.()?? null;
 const line = [
 created? created.toISOString(): "",
 c.email?? "",
 c.division?? "",
 c.field?? "",
 c.soloUmpire?? "",
 c.distanceMeters?? "",
 c.location?.lat?? "",
 c.location?.lng?? "",
 c.userId?? "",
 c.id?? "",
 ].map(escape);
 lines.push(line.join(","));
 }

 return lines.join("\n");
 };

 const exportCsv = async () => {
 try {
 if (!filtered.length) {
 Alert.alert("Nothing to export", "Your current filter returns no results.");
 return;
 }

 const csv = toCsv(filtered);
 const filename = <code>pbysa_checkins_${new Date().toISOString().slice(0, 10)}.csv</code>;
 const path = FileSystem.cacheDirectory + filename;

 await FileSystem.writeAsStringAsync(path, csv, {
 encoding: FileSystem.EncodingType.UTF8,
 });

 if (!(await Sharing.isAvailableAsync())) {
 Alert.alert(
 "Sharing not available",
 <code>CSV saved to:\n${path}\n\n(Sharing isn't available on this device.)</code>
 );
 return;
 }

 await Sharing.shareAsync(path, {
 mimeType: "text/csv",
 dialogTitle: "Export Check-Ins CSV",
 });
 } catch (e) {
 Alert.alert("Export failed", e?.message?? "Could not export CSV.");
 }
 };

 const logout = async () => {
 try {
 await signOut(auth);
 } catch (e) {
 Alert.alert("Logout error", e?.message?? "Could not log out.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>Admin • Check-Ins</Text>
 <Text style={styles.subtitle}>
 {user.email} • {role} • Showing {filtered.length} / {allCheckins.length}
 </Text>

 <View style={styles.card}>
 <Text style={styles.label}>Search by email</Text>
 <TextInput
 value={searchEmail}
 onChangeText={setSearchEmail}
 placeholder="type part of an email…"
 autoCapitalize="none"
 style={styles.input}
 />

 <Text style={styles.label}>Division</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={divisionFilter} onValueChange={setDivisionFilter}>
 <Picker.Item label="All" value="All" />
 {DIVISIONS.map((d) => (
 <Picker.Item key={d} label={d} value={d} />
 ))}
 </Picker>
 </View>

 <Text style={styles.label}>Field</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={fieldFilter} onValueChange={setFieldFilter}>
 <Picker.Item label="All" value="All" />
 {FIELDS.map((f) => (
 <Picker.Item key={String(f)} label={String(f)} value={String(f)} />
 ))}
 </Picker>
 </View>

 <Text style={styles.label}>Solo</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={soloFilter} onValueChange={setSoloFilter}>
 <Picker.Item label="All" value="All" />
 <Picker.Item label="Yes" value="Yes" />
 <Picker.Item label="No" value="No" />
 </Picker>
 </View>

 <Text style={styles.label}>Date</Text>
 <View style={styles.pickerWrap}>
 <Picker selectedValue={dateFilter} onValueChange={setDateFilter}>
 <Picker.Item label="All" value="All" />
 <Picker.Item label="Today" value="Today" />
 <Picker.Item label="Last 7 days" value="Last7" />
 </Picker>
 </View>

 <Button title="Export filtered CSV" onPress={exportCsv} />
 <View style={{ height: 10 }} />
 <Button title="Log Out" onPress={logout} variant="secondary" />
 </View>

 <Text style={[styles.sectionTitle, { marginTop: 14 }]}>Filtered results</Text>

 {loading? (
 <ActivityIndicator style={{ marginTop: 12 }} />
 ): (
 <FlatList
 data={filtered}
 keyExtractor={(item) => item.id}
 ListEmptyComponent={<Text style={styles.hint}>No check-ins match these filters.</Text>}
 renderItem={({ item }) => (
 <View style={styles.listRow}>
 <Text style={styles.listRowTitle}>
 {item.email || item.userId} • {item.division} • Field {item.field} • Solo:{" "}
 {item.soloUmpire}
 </Text>
 <Text style={styles.listRowSub}>
 {formatWhen(item.createdAt)} • {Math.round(item.distanceMeters ?? 0)}m
 </Text>
 </View>
 )}
 />
 )}
 </SafeAreaView>
 );
}

#### Right now the admin screen loads the most recent 500 check-ins and filters locally. This avoids Firestore “composite index” headaches and keeps the MVP simple.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=24 "Edit section: Right now the admin screen loads the most recent 500 check-ins and filters locally. This avoids Firestore “composite index” headaches and keeps the MVP simple.")

If you expect more than that, the next upgrade is server-side filtering (Firestore where() queries + indexes) or a dedicated admin export Cloud Function.

If you want, I can also add:

*   “Export All (last X days)” without loading them all into the app first, using a Cloud Function
*   Admin-only user promotion screen (pick a user email → set role to admin)

### User: add Admin-only user promotion screen[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=25 "Edit section: User: add Admin-only user promotion screen")

add Admin-only user promotion screen

### Assistant: Yep.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=26 "Edit section: Assistant: Yep.")

Yep. Here’s an Admin-only User Promotion screen that lets an admin:

*   Search exact email
*   View the matched user(s)
*   Set role to admin or umpire

This uses your existing users/{uid} docs and your Firestore rules already allow users updates only by admins.

#### Just confirming the key line is present:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=27 "Edit section: Just confirming the key line is present:")

match /users/{uid} {
 allow read: if isSignedIn() && request.auth.uid == uid;
 allow create: if isSignedIn() && request.auth.uid == uid;
 allow update: if isAdmin();
}

#### Add the missing Firestore functions:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=28 "Edit section: Add the missing Firestore functions:")

import { updateDoc, getDocs } from "firebase/firestore";

(Keep the existing imports you already have.)

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=29 "Edit section: ###")

This wraps two admin screens:

*   Check-Ins (your current one)
*   Users (new promotion screen)

Paste this entire block in place of your existing AdminScreen function. (Inside it, I kept your check-in filtering/export logic as a separate child component called AdminCheckinsPanel so it’s clean.)

function AdminScreen({ user, role }) {
 const [tab, setTab] = useState("checkins"); // "checkins" | "users"

 const logout = async () => {
 try {
 await signOut(auth);
 } catch (e) {
 Alert.alert("Logout error", e?.message ?? "Could not log out.");
 }
 };

 return (
 <SafeAreaView style={styles.container}>
 <Text style={styles.title}>Admin</Text>
 <Text style={styles.subtitle}>
 {user.email} • {role}
 </Text>

 <View style={[styles.card, { paddingBottom: 8 }]}>
 <View style={styles.adminTabRow}>
 <Pressable
 onPress={() => setTab("checkins")}
 style={[styles.adminTab, tab === "checkins" && styles.adminTabActive]}
 >
 <Text style={[styles.adminTabText, tab === "checkins" && styles.adminTabTextActive]}>
 Check-Ins
 </Text>
 </Pressable>

 <Pressable
 onPress={() => setTab("users")}
 style={[styles.adminTab, tab === "users" && styles.adminTabActive]}
 >
 <Text style={[styles.adminTabText, tab === "users" && styles.adminTabTextActive]}>
 Users
 </Text>
 </Pressable>
 </View>

 <Button title="Log Out" onPress={logout} variant="secondary" />
 </View>

 {tab === "checkins" ? (
 <AdminCheckinsPanel />
 ) : (
 <AdminUsersPanel />
 )}
 </SafeAreaView>
 );
}

#### Paste this below AdminScreen (or anywhere in the file beneath imports):[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=30 "Edit section: Paste this below AdminScreen (or anywhere in the file beneath imports) :")

function AdminUsersPanel() {
 const [emailQuery, setEmailQuery] = useState("");
 const [loading, setLoading] = useState(false);
 const [results, setResults] = useState([]); // [{id, email, role}]

 const searchByExactEmail = async () => {
 const q = emailQuery.trim().toLowerCase();
 if (!q) {
 Alert.alert("Enter an email", "Type the user's email address to search.");
 return;
 }

 setLoading(true);
 try {
 // exact-match query (fast + index-free)
 const qy = query(collection(db, "users"), where("email", "==", q));
 const snap = await getDocs(qy);

 const found = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
 setResults(found);

 if (!found.length) {
 Alert.alert("No match", "No user found with that email.\n\nThey must create an account first.");
 }
 } catch (e) {
 Alert.alert("Search error", e?.message ?? "Could not search users.");
 } finally {
 setLoading(false);
 }
 };

 const setRoleForUser = async (uid, newRole) => {
 try {
 await updateDoc(doc(db, "users", uid), { role: newRole });
 setResults((prev) => prev.map((u) => (u.id === uid ? { ...u, role: newRole } : u)));
 Alert.alert("Updated", <code>Role set to "${newRole}".</code>);
 } catch (e) {
 Alert.alert("Update failed", e?.message ?? "Could not update role.");
 }
 };

 return (
 <View style={{ flex: 1 }}>
 <Text style={[styles.sectionTitle, { marginTop: 14 }]}>User promotion</Text>

 <View style={styles.card}>
 <Text style={styles.hint}>
 Search by exact email (the same email they used to sign up). Then promote/demote.
 </Text>

 <Text style={styles.label}>User email</Text>
 <TextInput
 value={emailQuery}
 onChangeText={setEmailQuery}
 placeholder="umpire@example.com"
 autoCapitalize="none"
 keyboardType="email-address"
 style={styles.input}
 />

 <Button title={loading ? "Searching…" : "Search"} onPress={searchByExactEmail} disabled={loading} />
 </View>

 <Text style={[styles.sectionTitle, { marginTop: 14 }]}>Results</Text>

 <FlatList
 data={results}
 keyExtractor={(item) => item.id}
 ListEmptyComponent={<Text style={styles.hint}>No results yet.</Text>}
 renderItem={({ item }) => (
 <View style={styles.listRow}>
 <Text style={styles.listRowTitle}>{item.email || item.id}</Text>
 <Text style={styles.listRowSub}>Current role: {item.role || "umpire"}</Text>

 <View style={styles.roleButtonRow}>
 <Pressable
 onPress={() => setRoleForUser(item.id, "admin")}
 style={[styles.roleButton, styles.roleButtonPrimary]}
 >
 <Text style={styles.roleButtonTextPrimary}>Make Admin</Text>
 </Pressable>

 <Pressable
 onPress={() => setRoleForUser(item.id, "umpire")}
 style={[styles.roleButton, styles.roleButtonSecondary]}
 >
 <Text style={styles.roleButtonTextSecondary}>Make Umpire</Text>
 </Pressable>
 </View>
 </View>
 )}
 />
 </View>
 );
}

#### Take your current “filters + CSV export + list” admin screen code and wrap it like this:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=31 "Edit section: Take your current “filters + CSV export + list” admin screen code and wrap it like this:")

function AdminCheckinsPanel() {
 // paste your existing Admin check-in logic here
 // (filters, exportCsv, FlatList, etc.)
}

Everything inside it can remain basically the same — just remove the outer <SafeAreaView> because AdminScreen already provides that.

#### Add these to your styles object:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=32 "Edit section: Add these to your styles object:")

adminTabRow: {
 flexDirection: "row",
 gap: 10,
 marginBottom: 12,
},
adminTab: {
 flex: 1,
 paddingVertical: 10,
 borderRadius: 10,
 borderWidth: 1,
 borderColor: "#ddd",
 alignItems: "center",
 backgroundColor: "#fff",
},
adminTabActive: {
 borderColor: "#111",
},
adminTabText: {
 fontWeight: "700",
 color: "#666",
},
adminTabTextActive: {
 color: "#111",
},
roleButtonRow: {
 flexDirection: "row",
 gap: 10,
 marginTop: 10,
},
roleButton: {
 flex: 1,
 paddingVertical: 10,
 borderRadius: 10,
 alignItems: "center",
},
roleButtonPrimary: {
 backgroundColor: "#111",
},
roleButtonSecondary: {
 backgroundColor: "#fff",
 borderWidth: 1,
 borderColor: "#111",
},
roleButtonTextPrimary: {
 color: "#fff",
 fontWeight: "800",
},
roleButtonTextSecondary: {
 color: "#111",
 fontWeight: "800",
},

#### [edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=33 "Edit section: - This search is exact-match email on purpose (reliable + fast + no indexing hassles). If you want “contains” search, we can do a “starts with” approach (needs extra fields/indexing).")

*   Users must have signed up at least once so a users/{uid} doc exists (your signup flow already creates it).

If you paste your current AdminScreen (the one with CSV export) here, I can fold it in and return a single clean App.js with everything wired perfectly.

## gpt-5-2[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=34 "Edit section: gpt-5-2")

### User: I am done making this app.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=35 "Edit section: User: I am done making this app.")

I am done making this app. How do I use this code to compile it into an actual app?

### Assistant: Great question — you’re at the “ship it” stage now 👍[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=36 "Edit section: Assistant: Great question — you’re at the “ship it” stage now 👍")

Great question — you’re at the “ship it” stage now 👍 Because you built this with Expo (React Native), compiling it into real iOS and Android apps is straightforward using EAS Build.

Below is the exact, production-ready path from code → App Store / Play Store.

### ✅ No Mac required for Android[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=37 "Edit section: ✅ No Mac required for Android")

✅ No local Xcode/Android Studio builds ✅ Safest + easiest

#### If you don’t already have one:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=38 "Edit section: If you don’t already have one:")

👉 [https://expo.dev/signup](https://expo.dev/signup)

Then log in from your project folder:

npx expo login

====

npm install -g eas-cli ====

Verify:

eas --version

#### From your app folder:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=39 "Edit section: From your app folder:")

eas build:configure

Answer the prompts:

*   Android package name → org.pbysa.umpirecheckin
*   iOS bundle identifier → org.pbysa.umpirecheckin
*   Accept defaults for everything else

This creates:

*   eas.json
*   Updates app.json

#### Open app.json and make sure it looks like this:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=40 "Edit section: Open app.json and make sure it looks like this:")

{
 "expo": {
 "name": "PBYSA Umpire Check-In",
 "slug": "pbysa-umpire-checkin",
 "version": "1.0.0",
 "orientation": "portrait",
 "icon": "./assets/icon.png",
 "splash": {
 "image": "./assets/splash.png",
 "resizeMode": "contain",
 "backgroundColor": "#ffffff"
 },
 "ios": {
 "bundleIdentifier": "org.pbysa.umpirecheckin",
 "supportsTablet": false
 },
 "android": {
 "package": "org.pbysa.umpirecheckin"
 },
 "plugins": [
 "expo-location"
 ]
 }
}

📌 Icons

*   App icon: 1024×1024 PNG
*   Splash screen: 1242×2436 PNG Place them in /assets.

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=41 "Edit section: ###")

eas build --platform android --profile preview

=====

eas build --platform android --profile production =====

Expo will:

*   Upload your code
*   Compile it
*   Give you a download link

You can install the APK directly on phones for testing.

====

eas build --platform ios --profile production ====

During first build:

*   Expo will ask to create iOS certificates
*   Say YES to everything

⚠️ You must have:

*   An Apple Developer Account ($99/year)
*   The Apple account email ready

Expo handles certificates automatically.

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=42 "Edit section: ###")

*   Download APK
*   Install on phone
*   Enable “Install unknown apps”

##### - Use TestFlight[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=43 "Edit section: - Use TestFlight")

*   Expo can submit automatically (next step)

#### ###[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=44 "Edit section: ###")

eas submit --platform android

You’ll need:

*   Google Play Developer account ($25 one-time)
*   App name, description, screenshots

=====

eas submit --platform ios =====

You’ll need:

*   App Store Connect access
*   Screenshots (Expo gives templates)

#### If you want to hide Firebase keys:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=45 "Edit section: If you want to hide Firebase keys:")

eas secret:create --name FIREBASE_API_KEY --value "xxx"

Then reference them in firebase.js.

#### - Android: Play Store listing or APK link[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=46 "Edit section: - Android: Play Store listing or APK link")

*   iOS: TestFlight install or App Store listing
*   Admin accounts: controlled inside the app
*   Cloud backend: Firebase (no server to maintain)

### Only do this if:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=47 "Edit section: Only do this if:")

*   You want full native control
*   You’re comfortable with Xcode / Android Studio

npx expo prebuild
npx expo run:android
npx expo run:ios

(This is not recommended for first-time publishing.)

#### ✅ Location permission text is correct[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=48 "Edit section: ✅ Location permission text is correct")

✅ Firebase rules tested ✅ Admin promotion works ✅ CSV export works ✅ Icons and splash screens added ✅ App name + bundle ID correct

#### - Store descriptions & screenshots?[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=49 "Edit section: - Store descriptions & screenshots?")

*   App Store privacy policy text?
*   Firebase production rules review?
*   Server-side geofence validation (extra security)?

Just tell me which one and I’ll handle it.

### User: use this as the background for the app.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=50 "Edit section: User: use this as the background for the app.")

use this as the background for the app.

### Assistant: Great — you can absolutely use that image as the app-wide background.[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=51 "Edit section: Assistant: Great — you can absolutely use that image as the app-wide background.")

Great — you can absolutely use that image as the app-wide background. Here’s the clean, correct way to do it in an Expo / React Native app like yours.

I’ll show you exact steps and exact code.

### 1️⃣ Add the image to your project[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=52 "Edit section: 1️⃣ Add the image to your project")

1.   Create an assets folder (if it doesn’t already exist):

/assets

1.   Put the image there and rename it something simple:

assets/pbysa-background.png

(Expo works best with PNGs for backgrounds.)

### 2️⃣ Use it as the app background (recommended approach)[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=53 "Edit section: 2️⃣ Use it as the app background (recommended approach)")

Instead of trying to set a “global CSS background” (which React Native doesn’t have), you wrap your screens in an ImageBackground component.

#### A) Import ImageBackground[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=54 "Edit section: A) Import ImageBackground")

At the top of App.js (or wherever your root screens are):

import { ImageBackground } from "react-native";

#### B) Create a reusable Background wrapper[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=55 "Edit section: B) Create a reusable Background wrapper")

Add this once near the top of your file:

function AppBackground({ children }) {
 return (
 <ImageBackground
 source={require("./assets/pbysa-background.png")}
 style={{ flex: 1 }}
 resizeMode="cover"
 >
 {children}
 </ImageBackground>
 );
}

#### C) Wrap every screen with it[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=56 "Edit section: C) Wrap every screen with it")

##### Example: Auth screen[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=57 "Edit section: Example: Auth screen")

Change this:

return (
 <SafeAreaView style={styles.container}>

To this:

return (
 <AppBackground>
 <SafeAreaView style={styles.container}>

And close it at the bottom:

 </SafeAreaView>
 </AppBackground>
);

##### Do this for all major screens:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=58 "Edit section: Do this for all major screens:")

*   AuthScreen
*   UmpireCheckInScreen
*   AdminScreen
*   Loading screens

This ensures: ✅ Same background everywhere ✅ Works on iOS + Android ✅ No performance issues

### 3️⃣ Adjust container styles (important)[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=59 "Edit section: 3️⃣ Adjust container styles (important)")

Because you now have a background image, remove solid white backgrounds so it shows through.

##### Change this:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=60 "Edit section: Change this:")

container: {
 flex: 1,
 padding: 18,
 backgroundColor: "#fff"
},

##### To this:[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=61 "Edit section: To this:")

container: {
 flex: 1,
 padding: 18,
 backgroundColor: "transparent"
},

#### Optional (recommended): Add a readable card overlay[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=62 "Edit section: Optional (recommended): Add a readable card overlay")

Your UI already uses cards — keep them slightly opaque so text stays readable.

Example tweak:

card: {
 borderWidth: 1,
 borderColor: "#eee",
 borderRadius: 14,
 padding: 16,
 backgroundColor: "rgba(255,255,255,0.9)"
},

This lets the logo show through subtly.

### 4️⃣ Optional: Darken or soften the background[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=63 "Edit section: 4️⃣ Optional: Darken or soften the background")

If the logo is too strong visually, add a light overlay:

function AppBackground({ children }) {
 return (
 <ImageBackground
 source={require("./assets/pbysa-background.png")}
 style={{ flex: 1 }}
 resizeMode="cover"
 >
 <View style={{ flex: 1, backgroundColor: "rgba(255,255,255,0.2)" }}>
 {children}
 </View>
 </ImageBackground>
 );
}

You can adjust 0.2 → 0.1 or 0.3.

### 5️⃣ (Optional) Use it for splash screen too[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=64 "Edit section: 5️⃣ (Optional) Use it for splash screen too")

In app.json:

{
 "expo": {
 "splash": {
 "image": "./assets/pbysa-background.png",
 "resizeMode": "contain",
 "backgroundColor": "#a7c9e8"
 }
 }
}

### 6️⃣ Test it[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=65 "Edit section: 6️⃣ Test it")

npx expo start

Check:

*   Login screen
*   Check-in screen
*   Admin screens
*   iOS notch + Android safe areas

#### Final result[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=66 "Edit section: Final result")

✔ PBYSA logo visible across the app ✔ Professional, branded look ✔ No layout breakage ✔ Works on iOS + Android

If you want next:

*   Logo watermarked instead of full background
*   Different background for Admin vs Umpire
*   Animated subtle background
*   App icon generated from this logo

Just tell me 👍

## References[edit](https://freemwiki.com/index.php?title=Openai/693f3576-eaf4-8011-9c02-8476c83275fd&action=edit&section=67 "Edit section: References")

1.   [↑](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_ref-1)["App build plan"](https://chatgpt.com/share/693f3576-eaf4-8011-9c02-8476c83275fd). ChatGPT. Retrieved 2025-12-15.
2.   [↑](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_ref-2)["MapQuest"](https://www.mapquest.com/us/florida/pensacola/32506-9663/2020-bauer-rd-30.38448%2C-87.40056). mapquest.com. Retrieved 2025-12-15.
3.   [↑](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_ref-3)["MapQuest"](https://www.mapquest.com/us/florida/pensacola/32506-9663/2020-bauer-rd-30.38448%2C-87.40056). mapquest.com. Retrieved 2025-12-15.
4.   [↑](https://freemwiki.com/index.php?mobileaction=toggle_view_mobile&title=Openai%2F693f3576-eaf4-8011-9c02-8476c83275fd#cite_ref-4)["MapQuest"](https://www.mapquest.com/us/florida/pensacola/32506-9663/2020-bauer-rd-30.38448%2C-87.40056). mapquest.com. Retrieved 2025-12-15.