Added ref login

frontend/src/pages/Dashboard.tsx

@@ -8,7 +8,6 @@ import TournamentForm from '../components/Forms/TournamentForm';
 import Modal from '../components/UI/Modal';
 import api, { WS_URL } from '../services/api';
 
-
 export interface TournamentType {
     id: string | number;
     name: string;
@@ -21,13 +20,13 @@ export interface TournamentType {
 interface OutletContextType {
     setNavTitle: (title: string) => void;
     setNavSubtitle: (subtitle: string) => void;
-    isAdmin: boolean;
+    role: 'admin' | 'ref' | null;
     showSettings: boolean;
     setShowSettings: (show: boolean) => void;
 }
 
 export default function Dashboard() {
-    const { setNavTitle, setNavSubtitle, isAdmin, showSettings, setShowSettings } = useOutletContext<OutletContextType>();
+    const { setNavTitle, setNavSubtitle, role, showSettings, setShowSettings } = useOutletContext<OutletContextType>();
 
     const [tournaments, setTournaments] = useState<TournamentType[]>([]);
     const [editTarget, setEditTarget] = useState<TournamentType | null>(null);
@@ -48,7 +47,6 @@ export default function Dashboard() {
     useEffect(() => {
         setNavTitle('Dashboard');
         setNavSubtitle('');
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         void loadDashboard();
 
         localStorage.removeItem('volley_view');
@@ -114,7 +112,7 @@ export default function Dashboard() {
         <div className="h-full overflow-y-auto pt-8 sm:pt-12 pb-32">
             <div className="container mx-auto max-w-5xl px-4 space-y-12">
 
-                {isAdmin && (
+                {role === 'admin' && (
                     <div className="flex justify-center md:justify-end">
                         <button onClick={() => { setEditTarget(null); setShowSettings(true); }} className="bg-orange-600 hover:bg-orange-500 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 text-[10px] font-black uppercase tracking-wider shadow-xl shadow-orange-600/20 active:scale-95 transition">
                             <Plus size={16} strokeWidth={4} /> Create
@@ -131,7 +129,7 @@ export default function Dashboard() {
                             </span> Live Events
                         </h2>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            {groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
+                            {groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
                         </div>
                     </section>
                 )}
@@ -143,7 +141,7 @@ export default function Dashboard() {
                     {groups.future.length > 0 ? (
                         <>
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                {futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
+                                {futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
                             </div>
                             {groups.future.length > 4 && (
                                 <div className="mt-8 text-center">
@@ -165,7 +163,7 @@ export default function Dashboard() {
                         </button>
                         {showPast && (
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-75 hover:opacity-100 transition-opacity">
-                                {groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
+                                {groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
                             </div>
                         )}
                     </section>

frontend/src/pages/Login.tsx

@@ -43,8 +43,12 @@ export default function Login() {
                         </div>
                     </div>
 
-                    <h1 className="text-2xl font-black text-center text-zinc-900 dark:text-white tracking-tight mb-2">Admin Access</h1>
-                    <p className="text-center text-zinc-500 text-sm font-medium mb-8">Enter administrative credentials</p>
+                    <h1 className="text-2xl font-black text-center text-zinc-900 dark:text-white tracking-tight mb-2">
+                        Staff Login
+                    </h1>
+                    <p className="text-center text-zinc-500 text-sm font-medium mb-8">
+                        Enter staff credentials
+                    </p>
 
                     {error && (
                         <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase tracking-wide rounded-xl text-center border border-red-100 dark:border-red-900/50">

frontend/src/pages/Tournament.tsx

@@ -52,12 +52,12 @@ export interface ProcessedMatch extends RawMatch {
 interface OutletContextType {
     setNavTitle: (title: string) => void;
     setNavSubtitle: (subtitle: string) => void;
-    isAdmin: boolean;
+    role: 'admin' | 'ref' | null;
 }
 
 export default function Tournament() {
     const { id } = useParams<{ id: string }>();
-    const { setNavTitle, setNavSubtitle, isAdmin } = useOutletContext<OutletContextType>();
+    const { setNavTitle, setNavSubtitle, role } = useOutletContext<OutletContextType>();
 
     const [matches, setMatches] = useState<ProcessedMatch[]>([]);
     const [view, setView] = useState<string>(() => localStorage.getItem('volley_view') || 'bracket');
@@ -190,7 +190,11 @@ export default function Tournament() {
                         <CalendarDays size={16} /> Schedule
                     </button>
                 </div>
-                {isAdmin && <button onClick={() => setShowSettings(true)} className="p-2 text-zinc-400 hover:text-orange-600 transition rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800"><SlidersHorizontal size={20} /></button>}
+                {role === 'admin' && (
+                    <button onClick={() => setShowSettings(true)} className="p-2 text-zinc-400 hover:text-orange-600 transition rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                        <SlidersHorizontal size={20} />
+                    </button>
+                )}
             </div>
 
             <div className="flex-1 overflow-hidden relative print:overflow-visible print:h-auto print:block">
@@ -205,7 +209,7 @@ export default function Tournament() {
                     isOpen={!!scoreMatch}
                     onClose={() => setScoreMatch(null)}
                     match={scoreMatch}
-                    isAdmin={isAdmin}
+                    isAuthenticated={!!role}
                     onClear={async (mid: string | number, c: string) => {
                         await api.delete(`/tournaments/${id}/matches/${mid}/score?code=${encodeURIComponent(c || '')}`);
                         setScoreMatch(null);