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>

server/src/index.ts

@@ -6,6 +6,7 @@ import authRoutes from './routes/auth';
 import erpRoutes from './routes/erp';
 import etlRoutes from './routes/etl';
 import seasonsRoutes from './routes/seasons';
+import usersRoutes from './routes/users';
 
 const app = express();
 app.use(cors({ origin: true, credentials: true }));
@@ -17,6 +18,7 @@ app.use('/auth', authRoutes);
 app.use('/api/erp', erpRoutes);
 app.use('/api/etl', etlRoutes);
 app.use('/api/seasons', seasonsRoutes);
+app.use('/api/users', usersRoutes);
 
 app.listen(server.port, () => {
   console.log(`\nServer running on http://localhost:${server.port}`);

server/src/routes/auth.ts

@@ -1,61 +1,90 @@
 import { Router, Request, Response } from 'express';
 import crypto from 'crypto';
 import { auth } from '../config';
+import { discoverTableIds, fetchAllRecords } from '../services/nocodbClient';
 
 const router = Router();
 
-// In-memory session store (simple — works for single server)
+interface UserRecord {
-const sessions = new Map<string, { createdAt: number }>();
+  Id: number;
+  Name: string;
+  PIN: string;
+  Role: string;
+}
+
+interface Session {
+  name: string;
+  role: string;
+  createdAt: number;
+}
+
+const sessions = new Map<string, Session>();
 const SESSION_MAX_AGE = 7 * 24 * 60 * 60 * 1000; // 7 days
 
 function generateSessionId(): string {
   return crypto.randomBytes(32).toString('hex');
 }
 
-function isValidSession(sessionId: string): boolean {
+function getSession(sessionId: string): Session | null {
   const session = sessions.get(sessionId);
-  if (!session) return false;
+  if (!session) return null;
   if (Date.now() - session.createdAt > SESSION_MAX_AGE) {
     sessions.delete(sessionId);
-    return false;
+    return null;
   }
-  return true;
+  return session;
 }
 
-// POST /auth/login — verify PIN, set session cookie
+// POST /auth/login
-router.post('/login', (req: Request, res: Response) => {
+router.post('/login', async (req: Request, res: Response) => {
   const { pin } = req.body;
-
+  if (!pin) {
-  if (!auth.adminPin) {
+    res.status(400).json({ error: 'PIN required' });
-    res.status(503).json({ error: 'Auth not configured' });
-    return;
-  }
-
-  if (pin !== auth.adminPin) {
-    res.status(401).json({ error: 'Invalid PIN' });
     return;
   }
 
+  // Check super admin PIN from env first
+  if (auth.adminPin && pin === auth.adminPin) {
     const sessionId = generateSessionId();
-  sessions.set(sessionId, { createdAt: Date.now() });
+    sessions.set(sessionId, { name: 'Admin', role: 'admin', createdAt: Date.now() });
+    res.cookie('hihala_session', sessionId, { httpOnly: true, sameSite: 'lax', maxAge: SESSION_MAX_AGE, path: '/' });
+    res.json({ ok: true, name: 'Admin', role: 'admin' });
+    return;
+  }
 
-  res.cookie('hihala_session', sessionId, {
+  // Check NocoDB Users table
-    httpOnly: true,
+  try {
-    sameSite: 'lax',
+    const tables = await discoverTableIds();
-    maxAge: SESSION_MAX_AGE,
+    if (tables['Users']) {
-    path: '/',
+      const users = await fetchAllRecords<UserRecord>(tables['Users']);
+      const user = users.find(u => u.PIN === pin);
+      if (user) {
+        const sessionId = generateSessionId();
+        sessions.set(sessionId, { name: user.Name, role: user.Role || 'viewer', createdAt: Date.now() });
+        res.cookie('hihala_session', sessionId, { httpOnly: true, sameSite: 'lax', maxAge: SESSION_MAX_AGE, path: '/' });
+        res.json({ ok: true, name: user.Name, role: user.Role || 'viewer' });
+        return;
+      }
+    }
+  } catch (err) {
+    console.warn('Failed to check Users table:', (err as Error).message);
+  }
+
+  res.status(401).json({ error: 'Invalid PIN' });
 });
 
-  res.json({ ok: true });
+// GET /auth/check
-});
-
-// GET /auth/check — check if session is valid
 router.get('/check', (req: Request, res: Response) => {
   const sessionId = req.cookies?.hihala_session;
-  res.json({ authenticated: !!sessionId && isValidSession(sessionId) });
+  const session = sessionId ? getSession(sessionId) : null;
+  res.json({
+    authenticated: !!session,
+    name: session?.name || null,
+    role: session?.role || null,
+  });
 });
 
-// POST /auth/logout — destroy session
+// POST /auth/logout
 router.post('/logout', (req: Request, res: Response) => {
   const sessionId = req.cookies?.hihala_session;
   if (sessionId) sessions.delete(sessionId);

server/src/routes/users.ts

@@ -0,0 +1,46 @@
+import { Router, Request, Response } from 'express';
+import { discoverTableIds, fetchAllRecords, createRecord, deleteRecord } from '../services/nocodbClient';
+
+const router = Router();
+
+async function getUsersTableId(): Promise<string> {
+  const tables = await discoverTableIds();
+  const id = tables['Users'];
+  if (!id) throw new Error("NocoDB table 'Users' not found");
+  return id;
+}
+
+// GET /api/users
+router.get('/', async (_req: Request, res: Response) => {
+  try {
+    const tableId = await getUsersTableId();
+    const records = await fetchAllRecords(tableId);
+    res.json(records);
+  } catch (err) {
+    res.status(500).json({ error: (err as Error).message });
+  }
+});
+
+// POST /api/users
+router.post('/', async (req: Request, res: Response) => {
+  try {
+    const tableId = await getUsersTableId();
+    const result = await createRecord(tableId, req.body);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: (err as Error).message });
+  }
+});
+
+// DELETE /api/users/:id
+router.delete('/:id', async (req: Request, res: Response) => {
+  try {
+    const tableId = await getUsersTableId();
+    await deleteRecord(tableId, parseInt(req.params.id));
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: (err as Error).message });
+  }
+});
+
+export default router;

src/App.tsx

@@ -38,6 +38,8 @@ interface DataSource {
 function App() {
   const { t, dir, switchLanguage } = useLanguage();
   const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+  const [userRole, setUserRole] = useState<string>('viewer');
+  const [userName, setUserName] = useState<string>('');
   const [data, setData] = useState<MuseumRecord[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
@@ -114,6 +116,8 @@ function App() {
       .then(d => {
         setAuthenticated(d.authenticated);
         if (d.authenticated) {
+          setUserRole(d.role || 'viewer');
+          setUserName(d.name || '');
           loadData();
           loadSeasons();
         }
@@ -122,8 +126,10 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleLogin = () => {
+  const handleLogin = (name: string, role: string) => {
     setAuthenticated(true);
+    setUserName(name);
+    setUserRole(role);
     loadData();
     loadSeasons();
   };
@@ -281,9 +287,9 @@ function App() {
         <main>
           <Suspense fallback={<LoadingSkeleton />}>
             <Routes>
-              <Route path="/" element={<Dashboard data={data} seasons={seasons} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
+              <Route path="/" element={<Dashboard data={data} seasons={seasons} userRole={userRole} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
               <Route path="/comparison" element={<Comparison data={data} seasons={seasons} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
-              <Route path="/settings" element={<Settings onSeasonsChange={loadSeasons} />} />
+              {userRole === 'admin' && <Route path="/settings" element={<Settings onSeasonsChange={loadSeasons} />} />}
             </Routes>
           </Suspense>
         </main>
@@ -307,12 +313,14 @@ function App() {
             </svg>
             <span>{t('nav.compare')}</span>
           </NavLink>
+          {userRole === 'admin' && (
             <NavLink to="/settings" className="mobile-nav-item">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                 <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>
               <span>{t('nav.settings')}</span>
             </NavLink>
+          )}
           <button
             className="mobile-nav-item"
             onClick={switchLanguage}

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>
   );
 }

src/locales/ar.json

@@ -166,7 +166,13 @@
     "endDate": "تاريخ النهاية",
     "actions": "الإجراءات",
     "namePlaceholder": "مثال: رمضان",
-    "add": "إضافة"
+    "add": "إضافة",
+    "delete": "حذف",
+    "users": "المستخدمون",
+    "usersHint": "أضف مستخدمين برمز PIN. المشاهدون يمكنهم رؤية لوحة التحكم فقط.",
+    "userName": "الاسم",
+    "userPin": "رمز PIN",
+    "userRole": "الدور"
   },
   "login": {
     "subtitle": "أدخل رمز PIN للوصول إلى لوحة التحكم",

src/locales/en.json

@@ -166,7 +166,13 @@
     "endDate": "End Date",
     "actions": "Actions",
     "namePlaceholder": "e.g. Ramadan",
-    "add": "Add"
+    "add": "Add",
+    "delete": "Delete",
+    "users": "Users",
+    "usersHint": "Add users with a PIN code. Viewers can see the dashboard but not settings.",
+    "userName": "Name",
+    "userPin": "PIN",
+    "userRole": "Role"
   },
   "login": {
     "subtitle": "Enter your PIN to access the dashboard",

src/services/usersService.ts

@@ -0,0 +1,31 @@
+export interface User {
+  Id?: number;
+  Name: string;
+  PIN: string;
+  Role: string;
+}
+
+export async function fetchUsers(): Promise<User[]> {
+  try {
+    const res = await fetch('/api/users');
+    if (!res.ok) return [];
+    return res.json();
+  } catch {
+    return [];
+  }
+}
+
+export async function createUser(user: Omit<User, 'Id'>): Promise<User> {
+  const res = await fetch('/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(user),
+  });
+  if (!res.ok) throw new Error('Failed to create user');
+  return res.json();
+}
+
+export async function deleteUser(id: number): Promise<void> {
+  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error('Failed to delete user');
+}

src/types/index.ts

@@ -131,6 +131,7 @@ export interface ChartData {
 export interface DashboardProps {
   data: MuseumRecord[];
   seasons: Season[];
+  userRole: string;
   showDataLabels: boolean;
   setShowDataLabels: (value: boolean) => void;
   includeVAT: boolean;

vite.config.ts

@@ -18,6 +18,10 @@ export default defineConfig({
         target: 'http://localhost:3002',
         changeOrigin: true,
       },
+      '/api/users': {
+        target: 'http://localhost:3002',
+        changeOrigin: true,
+      },
       '/api/seasons': {
         target: 'http://localhost:3002',
         changeOrigin: true,