Editing Openai/693f3576-eaf4-8011-9c02-8476c83275fd (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: ====

<syntaxhighlight lang="js">match /users/{uid} {
  allow read: if isSignedIn() && request.auth.uid == uid;
  allow create: if isSignedIn() && request.auth.uid == uid;
  allow update: if isAdmin();
}

</syntaxhighlight>

==== Add the missing Firestore functions: ====

<syntaxhighlight lang="js">import { updateDoc, getDocs } from "firebase/firestore";

</syntaxhighlight>

(Keep the existing imports you already have.)

==== ### ====

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

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

</syntaxhighlight>

==== Paste this below AdminScreen (or anywhere in the file beneath imports) : ====

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

</syntaxhighlight>

==== Take your current “filters + CSV export + list” admin screen code and wrap it like this: ====

<syntaxhighlight lang="js">function AdminCheckinsPanel() {
  // paste your existing Admin check-in logic here
  // (filters, exportCsv, FlatList, etc.)
}

</syntaxhighlight>

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

==== Add these to your styles object: ====

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

</syntaxhighlight>

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