Home

import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Alert } from 'react-native'; export type UserRole = 'LeagueAdmin' | 'Referee' | 'Coach'; interface AdminSettingsPanelProps { currentRole: UserRole; onRoleChange: (newRole: UserRole) => void; coachTeamName?: string; } export default function AdminSettingsPanel({ currentRole = 'Coach', onRoleChange, coachTeamName = "Philly Athletic FC" }: AdminSettingsPanelProps) { const [selectedRole, setSelectedRole] = useState(currentRole); // 1. Process role update context change const handleRoleSelection = (role: UserRole) => { setSelectedRole(role); onRoleChange(role); Alert.alert( "Context Switched", `App viewing permissions updated to: ${getRoleLabel(role)} Mode.`, [{ text: "OK" }] ); }; // Helper to translate code terms to readable labels const getRoleLabel = (role: UserRole) => { switch(role) { case 'LeagueAdmin': return '🏆 League Administrator'; case 'Referee': return '🏁 Official Center Referee'; case 'Coach': return '📋 Team Head Coach'; } }; return ( {/* Panel Header */} Environment SettingsSimulated Runtime Environment Switcher {/* 🔐 ROLE SELECTOR GRID BUTTON CONTAINER */} Choose Simulated Login Session {/* League Admin Option Block */} handleRoleSelection('LeagueAdmin')} > League Administrator Bypasses sync arrays, manually adds guest rosters, and runs audits. {selectedRole === 'LeagueAdmin' ? '●' : '○'} {/* Referee Option Block */} handleRoleSelection('Referee')} > Center Match Referee Logs cards, tracks substitutions, enters scores, and signs full-time sheet blocks. {selectedRole === 'Referee' ? '●' : '○'} {/* Coach Option Block */} handleRoleSelection('Coach')} > Team Coach Mode Views assigned squads, uploads camera photo verifications, and checks in lineups. {selectedRole === 'Coach' ? '●' : '○'} {/* 🔍 ACTIVE PERMISSIONS DESCRIPTIONS AUDIT TRACE */} Active Interface Matrix StatusCurrent Identity Scope:{getRoleLabel(selectedRole)}Team Bounds Mapping: {selectedRole === 'Coach' ? coachTeamName : 'Global (All Teams/Leagues)'} Override Form Button (➕): {selectedRole === 'LeagueAdmin' ? 'VISIBLE (ENABLED)' : 'HIDDEN (LOCKED)'} Match Finalization Sign Block: {selectedRole === 'Referee' ? 'EDITABLE (CAN SIGN)' : 'READ-ONLY (VIEW ONLY)'} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f9fa' }, contentContainer: { paddingHorizontal: 16, paddingTop: 60, paddingBottom: 40 }, header: { marginBottom: 24, alignItems: 'center' }, headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#1a202c' }, headerSubtitle: { fontSize: 13, color: '#a0aec0', marginTop: 2, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.5 }, // Selector Panel Core cardContainer: { backgroundColor: '#ffffff', borderRadius: 16, padding: 16, borderWidth: 1, borderColor: '#e2e8f0', marginBottom: 20 }, cardSectionLabel: { fontSize: 12, fontWeight: '700', color: '#a0aec0', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 12 }, roleRow: { flexDirection: 'row', alignItems: 'center', padding: 14, borderRadius: 12, borderWidth: 1, borderColor: '#edf2f7', marginBottom: 12, backgroundColor: '#f7fafc' }, roleInfoText: { flex: 1, paddingRight: 8 }, roleTitleText: { fontSize: 15, fontWeight: 'bold', color: '#4a5568', marginBottom: 2 }, roleDescText: { fontSize: 12, color: '#718096', lineHeight: 16 }, chevronSymbol: { fontSize: 16, color: '#cbd5e0', paddingHorizontal: 4 }, // Highlight Toggles Matching Active states activeAdminRow: { backgroundColor: '#f7fafc', borderColor: '#2d3748', borderWidth: 2 }, activeAdminText: { color: '#2d3748' }, activeRefRow: { backgroundColor: '#fffaf0', borderColor: '#dd6b20', borderWidth: 2 }, activeRefText: { color: '#dd6b20' }, activeCoachRow: { backgroundColor: '#ebf8ff', borderColor: '#2b6cb0', borderWidth: 2 }, activeCoachText: { color: '#2b6cb0' }, // Permissions Inspector Dashboard Card auditCard: { backgroundColor: '#ffffff', borderRadius: 16, padding: 16, borderWidth: 1, borderColor: '#e2e8f0' }, auditCardTitle: { fontSize: 12, fontWeight: '700', color: '#718096', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 14, borderBottomWidth: 1, borderColor: '#edf2f7', paddingBottom: 6 }, metaLine: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderColor: '#f7fafc' }, metaLabel: { fontSize: 13, color: '#718096', fontWeight: '500' }, metaValue: { fontSize: 13, fontWeight: '600', color: '#2d3748' }, allowedText: { color: '#38a169', fontWeight: 'bold' }, deniedText: { color: '#e53e3e', fontWeight: 'normal' } });