feat: multi-user auth with role-based access

- Server checks PIN against env (super admin) + NocoDB Users table
- Session stores name + role (admin/viewer)
- Admin: sees Settings page (seasons + users management)
- Viewer: sees Dashboard + Comparison only, no Settings
- Users CRUD on Settings page: add name + PIN + role, delete
- Settings link + nav hidden for non-admin users

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/Dashboard.tsx

@@ -34,7 +34,7 @@ const defaultFilters: Filters = {
 
 const filterKeys: (keyof Filters)[] = ['year', 'district', 'quarter'];
 
-function Dashboard({ data, seasons, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT }: DashboardProps) {
+function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT }: DashboardProps) {
   const { t } = useLanguage();
   const [searchParams, setSearchParams] = useSearchParams();
   const [pilgrimLoaded, setPilgrimLoaded] = useState(false);
@@ -800,14 +800,14 @@ function Dashboard({ data, seasons, showDataLabels, setShowDataLabels, includeVA
       </>
       )}
 
-      <div className="settings-link">
+      {userRole === 'admin' && <div className="settings-link">
         <Link to="/settings">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
           </svg>
           {t('nav.settings')}
         </Link>
-      </div>
+      </div>}
     </div>
   );
 }

src/components/Login.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useLanguage } from '../contexts/LanguageContext';
 
 interface LoginProps {
-  onLogin: () => void;
+  onLogin: (name: string, role: string) => void;
 }
 
 function Login({ onLogin }: LoginProps) {
@@ -30,7 +30,8 @@ function Login({ onLogin }: LoginProps) {
         return;
       }
 
-      onLogin();
+      const data = await res.json();
+      onLogin(data.name || '', data.role || 'viewer');
     } catch {
       setError(t('login.error'));
       setLoading(false);

src/components/Settings.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useLanguage } from '../contexts/LanguageContext';
 import { fetchSeasons, createSeason, updateSeason, deleteSeason } from '../services/seasonsService';
+import { fetchUsers, createUser, deleteUser, type User } from '../services/usersService';
 import type { Season } from '../types';
 
 const DEFAULT_COLORS = ['#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];
@@ -78,6 +79,9 @@ function Settings({ onSeasonsChange }: SettingsProps) {
     Color: DEFAULT_COLORS[0],
   });
 
+  const [users, setUsers] = useState<User[]>([]);
+  const [newUser, setNewUser] = useState<Omit<User, 'Id'>>({ Name: '', PIN: '', Role: 'viewer' });
+
   const loadSeasons = async () => {
     setLoading(true);
     const data = await fetchSeasons();
@@ -85,7 +89,12 @@ function Settings({ onSeasonsChange }: SettingsProps) {
     setLoading(false);
   };
 
-  useEffect(() => { loadSeasons(); }, []);
+  const loadUsers = async () => {
+    const data = await fetchUsers();
+    setUsers(data);
+  };
+
+  useEffect(() => { loadSeasons(); loadUsers(); }, []);
 
   const handleCreate = async () => {
     if (!newSeason.Name || !newSeason.StartDate || !newSeason.EndDate) return;
@@ -162,6 +171,62 @@ function Settings({ onSeasonsChange }: SettingsProps) {
           </table>
         </div>
       </div>
+
+      <div className="chart-card" style={{ marginTop: 24 }}>
+        <h2>{t('settings.users')}</h2>
+        <p className="settings-hint">{t('settings.usersHint')}</p>
+
+        <div className="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>{t('settings.userName')}</th>
+                <th>{t('settings.userPin')}</th>
+                <th>{t('settings.userRole')}</th>
+                <th>{t('settings.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map(u => (
+                <tr key={u.Id}>
+                  <td>{u.Name}</td>
+                  <td><code>{u.PIN}</code></td>
+                  <td>{u.Role}</td>
+                  <td>
+                    <button className="btn-small btn-danger" onClick={async () => { await deleteUser(u.Id!); await loadUsers(); }}>
+                      {t('settings.delete') || 'Delete'}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+              <tr className="add-row">
+                <td>
+                  <input type="text" value={newUser.Name} onChange={e => setNewUser({ ...newUser, Name: e.target.value })} placeholder={t('settings.namePlaceholder')} />
+                </td>
+                <td>
+                  <input type="text" value={newUser.PIN} onChange={e => setNewUser({ ...newUser, PIN: e.target.value })} placeholder="PIN" />
+                </td>
+                <td>
+                  <select value={newUser.Role} onChange={e => setNewUser({ ...newUser, Role: e.target.value })}>
+                    <option value="viewer">Viewer</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                </td>
+                <td>
+                  <button className="btn-small btn-primary" onClick={async () => {
+                    if (!newUser.Name || !newUser.PIN) return;
+                    await createUser(newUser);
+                    setNewUser({ Name: '', PIN: '', Role: 'viewer' });
+                    await loadUsers();
+                  }} disabled={!newUser.Name || !newUser.PIN}>
+                    {t('settings.add')}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   );
 }