Editing Openai/693f3576-eaf4-8011-9c02-8476c83275fd (section)

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