Editing Openai/693f3576-eaf4-8011-9c02-8476c83275fd (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<ref>{{cite web|title=MapQuest|url=https://www.mapquest.com/us/florida/pensacola/32506-9663/2020-bauer-rd-30.38448%2C-87.40056|publisher=mapquest.com|access-date=2025-12-15}}</ref>

==== From your Expo project folder: ====

<syntaxhighlight lang="bash">npm install firebase expo-location
npm install @react-native-picker/picker

</syntaxhighlight>

==== ### ====

users/{uid}:

<syntaxhighlight lang="json">{
  "email": "ump@example.com",
  "role": "umpire" // or "admin"
}

</syntaxhighlight>

===== Each check-in document: =====

<syntaxhighlight lang="json">{
  "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
}

</syntaxhighlight>

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

==== In Firebase → Firestore → Rules: ====

<syntaxhighlight lang="js">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);
    }
  }
}

</syntaxhighlight>

==== Replace your App.js with the full version below. ====

<syntaxhighlight lang="js">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 },
});

</syntaxhighlight>

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<ref>{{cite web|title=MapQuest|url=https://www.mapquest.com/us/florida/pensacola/32506-9663/2020-bauer-rd-30.38448%2C-87.40056|publisher=mapquest.com|access-date=2025-12-15}}</ref>

==== Expo builds both. ====

For local testing:

<syntaxhighlight lang="bash">npx expo start

</syntaxhighlight>

When you’re ready to ship:

<syntaxhighlight lang="bash">npx expo install eas-cli
npx eas build:configure
npx eas build --platform ios
npx eas build --platform android

</syntaxhighlight>

==== 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.