fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: multi-user auth with role-based access
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
Details

Browse Source 
- 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>
This commit is contained in:
fahed
2026-03-31 22:17:44 +03:00
parent 8cf6f9eedd
commit 70af4962a6
12 changed files with 242 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.tsx
View File

@@ -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>
<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>
{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}

6
src/components/Dashboard.tsx
View File

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

5
src/components/Login.tsx
View File

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

67
src/components/Settings.tsx
View File

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

8
src/locales/ar.json
View File

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

8
src/locales/en.json
View File

@@ -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",

31
src/services/usersService.ts Normal file
View File

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

1
src/types/index.ts
View File

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