fix: mobile UX overhaul — collapsible filters, settings nav, responsive layout

- Add Settings link to desktop nav bar for admin users - Rewrite Settings page from table layout to responsive card list (fixes unusable mobile state) - Filter bar (Dashboard + Comparison): collapsible panel on mobile via display:contents trick; stacked full-width dropdowns replace horizontal scroll - Active filter count badge shown in collapsed filter header - AltMultiSelect dropdowns go full-width on mobile to prevent viewport overflow - Chart control separators hidden on mobile to avoid crowding - Metric grid: 2-col at ≤700px, 1-col at ≤480px - Comparison period cards: smaller font and tighter padding at ≤680px - Page shell padding reduced on mobile (48px→20px top, 24px→16px sides) - Settings page gets correct 80px bottom padding for mobile nav Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 12:22:07 +03:00
parent 30cdb5064a
commit c9cfb58896
5 changed files with 447 additions and 218 deletions
@@ -200,6 +200,8 @@ export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedM
  const prevCapture  = prevPilgrims ? prevM.visitors/prevPilgrims*100 : null;

  const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0;
+  const activeFilterCount = selDistricts.length + selChannels.length + selMuseums.length;
+  const [filtersOpen, setFiltersOpen] = useState(false);

  return (
    <div
@@ -231,13 +233,23 @@ export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedM
          onChange={(s,e) => { setPrevStart(s); setPrevEnd(e); }} availableYears={availableYears} L={L} />
      </div>

-      <div className="alt-filter-bar">
-        <span className="alt-filter-label">{L.filter}</span>
-        <div className="alt-filter-sep" />
-        <AltMultiSelect value={selDistricts} options={districts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
-        <AltMultiSelect value={selChannels}  options={channels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
-        <AltMultiSelect value={selMuseums}   options={museums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
-        {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
+      <div className={`alt-filter-bar${filtersOpen ? ' alt-filter-bar--open' : ''}`}>
+        <div className="alt-filter-head">
+          <span className="alt-filter-label">{L.filter}</span>
+          {activeFilterCount > 0 && <span className="alt-filter-badge">{activeFilterCount}</span>}
+          <button type="button" className="alt-filter-toggle" onClick={() => setFiltersOpen(v => !v)} aria-expanded={filtersOpen} aria-label="Toggle filters">
+            <svg className={`alt-filter-chevron${filtersOpen ? ' alt-filter-chevron--open' : ''}`} width="14" height="14" viewBox="0 0 10 10" fill="none">
+              <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="alt-filter-body">
+          <div className="alt-filter-sep" />
+          <AltMultiSelect value={selDistricts} options={districts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
+          <AltMultiSelect value={selChannels}  options={channels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
+          <AltMultiSelect value={selMuseums}   options={museums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
+          {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
+        </div>
      </div>

      <div className="alt-section-heading"><h2>{L.keyMetrics}</h2></div>
@@ -184,6 +184,8 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
  const metricOpts = [{ value:'revenue', label:L.revenue }, { value:'visitors', label:L.visitors }, { value:'tickets', label:L.tickets }];
  const granOpts   = [{ value:'day', label:L.daily }, { value:'week', label:L.weekly }, { value:'month', label:L.monthly }];
  const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0;
+  const activeFilterCount = selDistricts.length + selChannels.length + selMuseums.length;
+  const [filtersOpen, setFiltersOpen] = useState(false);

  return (
    <div
@@ -200,17 +202,27 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set

      <PeriodHero start={start} end={end} onChange={(s,e) => { setStart(s); setEnd(e); }} availableYears={availableYears} L={L} />

-      <div className="alt-filter-bar">
-        <span className="alt-filter-label">{L.filter}</span>
-        <div className="alt-filter-sep" />
-        <AltMultiSelect value={selDistricts} options={allDistricts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
-        <AltMultiSelect value={selChannels}  options={allChannels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
-        <AltMultiSelect value={selMuseums}   options={allMuseums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
-        {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
-        <div className="alt-filter-spacer" />
-        <div className="alt-vat-toggle">
-          <button type="button" className={`alt-vat-opt${!includeVAT?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(false)}>{L.exclVAT}</button>
-          <button type="button" className={`alt-vat-opt${includeVAT ?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(true)}>{L.inclVAT}</button>
+      <div className={`alt-filter-bar${filtersOpen ? ' alt-filter-bar--open' : ''}`}>
+        <div className="alt-filter-head">
+          <span className="alt-filter-label">{L.filter}</span>
+          {activeFilterCount > 0 && <span className="alt-filter-badge">{activeFilterCount}</span>}
+          <button type="button" className="alt-filter-toggle" onClick={() => setFiltersOpen(v => !v)} aria-expanded={filtersOpen} aria-label="Toggle filters">
+            <svg className={`alt-filter-chevron${filtersOpen ? ' alt-filter-chevron--open' : ''}`} width="14" height="14" viewBox="0 0 10 10" fill="none">
+              <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="alt-filter-body">
+          <div className="alt-filter-sep" />
+          <AltMultiSelect value={selDistricts} options={allDistricts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
+          <AltMultiSelect value={selChannels}  options={allChannels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
+          <AltMultiSelect value={selMuseums}   options={allMuseums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
+          {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
+          <div className="alt-filter-spacer" />
+          <div className="alt-vat-toggle">
+            <button type="button" className={`alt-vat-opt${!includeVAT?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(false)}>{L.exclVAT}</button>
+            <button type="button" className={`alt-vat-opt${includeVAT ?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(true)}>{L.inclVAT}</button>
+          </div>
        </div>
      </div>

@@ -6,13 +6,13 @@ import type { Season } from '../types';

 const DEFAULT_COLORS = ['#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];

-interface SeasonRowProps {
+interface SeasonItemProps {
  season: Season;
  onSave: (id: number, data: Partial<Season>) => Promise<void>;
  onDelete: (id: number) => Promise<void>;
 }

-function SeasonRow({ season, onSave, onDelete }: SeasonRowProps) {
+function SeasonItem({ season, onSave, onDelete }: SeasonItemProps) {
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState(season);

@@ -21,48 +21,46 @@ function SeasonRow({ season, onSave, onDelete }: SeasonRowProps) {
    setEditing(false);
  };

-  if (!editing) {
-    return (
-      <tr>
-        <td>
-          <span className="season-chip" style={{ backgroundColor: season.Color + '20', color: season.Color, borderColor: season.Color }}>
-            {season.Name} {season.HijriYear}
-          </span>
-        </td>
-        <td>{season.StartDate}</td>
-        <td>{season.EndDate}</td>
-        <td>
-          <div className="season-actions">
-            <button className="btn-small" onClick={() => setEditing(true)}>Edit</button>
-            <button className="btn-small btn-danger" onClick={() => onDelete(season.Id!)}>Delete</button>
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
  return (
-    <tr className="editing">
-      <td>
-        <div className="season-edit-name">
-          <input type="text" value={form.Name} onChange={e => setForm({ ...form, Name: e.target.value })} placeholder="Name" />
-          <input type="number" value={form.HijriYear} onChange={e => setForm({ ...form, HijriYear: parseInt(e.target.value) || 0 })} placeholder="Year" style={{ width: 80 }} />
-          <input type="color" value={form.Color} onChange={e => setForm({ ...form, Color: e.target.value })} />
+    <div className={`settings-item${editing ? ' settings-item--editing' : ''}`}>
+      <div className="settings-item-row">
+        <span className="season-chip" style={{ backgroundColor: season.Color + '20', color: season.Color, borderColor: season.Color }}>
+          {season.Name} {season.HijriYear}
+        </span>
+        <span className="settings-dates">{season.StartDate} → {season.EndDate}</span>
+        <div className="settings-item-actions">
+          <button className="btn-small" onClick={() => { setForm(season); setEditing(true); }}>Edit</button>
+          <button className="btn-small btn-danger" onClick={() => onDelete(season.Id!)}>Delete</button>
        </div>
-      </td>
-      <td><input type="date" value={form.StartDate} onChange={e => setForm({ ...form, StartDate: e.target.value })} /></td>
-      <td><input type="date" value={form.EndDate} onChange={e => setForm({ ...form, EndDate: e.target.value })} /></td>
-      <td>
-        <div className="season-actions">
-          <button className="btn-small btn-primary" onClick={handleSave}>Save</button>
-          <button className="btn-small" onClick={() => setEditing(false)}>Cancel</button>
+      </div>
+      {editing && (
+        <div className="settings-item-form">
+          <div className="form-row">
+            <input className="form-input" type="text" value={form.Name} onChange={e => setForm({ ...form, Name: e.target.value })} placeholder="Name" />
+            <input className="form-input form-input--sm" type="number" value={form.HijriYear} onChange={e => setForm({ ...form, HijriYear: parseInt(e.target.value) || 0 })} placeholder="Hijri Year" />
+            <input type="color" className="form-color" value={form.Color} onChange={e => setForm({ ...form, Color: e.target.value })} />
+          </div>
+          <div className="form-row">
+            <label className="form-field">
+              <span className="form-label">Start</span>
+              <input className="form-input" type="date" value={form.StartDate} onChange={e => setForm({ ...form, StartDate: e.target.value })} />
+            </label>
+            <label className="form-field">
+              <span className="form-label">End</span>
+              <input className="form-input" type="date" value={form.EndDate} onChange={e => setForm({ ...form, EndDate: e.target.value })} />
+            </label>
+          </div>
+          <div className="form-actions">
+            <button className="btn-small btn-primary" onClick={handleSave}>Save</button>
+            <button className="btn-small" onClick={() => setEditing(false)}>Cancel</button>
+          </div>
        </div>
-      </td>
-    </tr>
+      )}
+    </div>
  );
 }

-interface UserRowProps {
+interface UserItemProps {
  user: User;
  allMuseums: string[];
  allChannels: string[];
@@ -70,7 +68,7 @@ interface UserRowProps {
  onDelete: (id: number) => Promise<void>;
 }

-function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowProps) {
+function UserItem({ user, allMuseums, allChannels, onUpdate, onDelete }: UserItemProps) {
  const [editing, setEditing] = useState(false);
  const [allowedMuseums, setAllowedMuseums] = useState<string[]>(() => {
    try { return JSON.parse(user.AllowedMuseums || '[]'); } catch { return []; }
@@ -91,17 +89,18 @@ function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowP
  };

  const isAdmin = user.Role === 'admin';
-
  const museumCount = (() => { try { const a = JSON.parse(user.AllowedMuseums || '[]'); return Array.isArray(a) ? a.length : 0; } catch { return 0; } })();
  const channelCount = (() => { try { const a = JSON.parse(user.AllowedChannels || '[]'); return Array.isArray(a) ? a.length : 0; } catch { return 0; } })();

-  if (!editing) {
-    return (
-      <tr key={user.Id}>
-        <td>{user.Name}</td>
-        <td><code>{user.PIN}</code></td>
-        <td>{user.Role}</td>
-        <td>
+  return (
+    <div className={`settings-item${editing ? ' settings-item--editing' : ''}`}>
+      <div className="settings-item-row">
+        <div className="settings-user-info">
+          <span className="settings-user-name">{user.Name}</span>
+          <code className="settings-user-pin">{user.PIN}</code>
+          <span className="settings-user-role">{user.Role}</span>
+        </div>
+        <div className="settings-user-access">
          {isAdmin ? (
            <span className="access-badge access-badge--full">Full access</span>
          ) : (
@@ -110,53 +109,45 @@ function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowP
              <span className="access-badge">{channelCount === 0 ? 'All channels' : `${channelCount} channels`}</span>
            </>
          )}
-        </td>
-        <td>
-          <div className="season-actions">
-            {!isAdmin && <button className="btn-small" onClick={() => setEditing(true)}>Edit access</button>}
-            <button className="btn-small btn-danger" onClick={() => onDelete(user.Id!)}>Delete</button>
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
-  return (
-    <tr className="editing">
-      <td colSpan={5}>
-        <div style={{ padding: '12px 4px' }}>
-          <strong>{user.Name}</strong>
-          <div style={{ display: 'flex', gap: 32, marginTop: 12, flexWrap: 'wrap' }}>
-            <div>
-              <div style={{ fontWeight: 600, marginBottom: 8 }}>
-                Allowed Events {allowedMuseums.length === 0 && <span className="access-badge access-badge--full">All</span>}
+        </div>
+        <div className="settings-item-actions">
+          {!isAdmin && <button className="btn-small" onClick={() => setEditing(true)}>Edit access</button>}
+          <button className="btn-small btn-danger" onClick={() => onDelete(user.Id!)}>Delete</button>
+        </div>
+      </div>
+      {editing && (
+        <div className="settings-item-form">
+          <div className="access-columns">
+            <div className="access-col">
+              <div className="access-col-title">
+                Events {allowedMuseums.length === 0 && <span className="access-badge access-badge--full">All</span>}
              </div>
              {allMuseums.map(m => (
-                <label key={m} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, cursor: 'pointer' }}>
+                <label key={m} className="access-check">
                  <input type="checkbox" checked={allowedMuseums.includes(m)} onChange={() => toggleItem(allowedMuseums, setAllowedMuseums, m)} />
                  {m}
                </label>
              ))}
            </div>
-            <div>
-              <div style={{ fontWeight: 600, marginBottom: 8 }}>
-                Allowed Channels {allowedChannels.length === 0 && <span className="access-badge access-badge--full">All</span>}
+            <div className="access-col">
+              <div className="access-col-title">
+                Channels {allowedChannels.length === 0 && <span className="access-badge access-badge--full">All</span>}
              </div>
              {allChannels.map(c => (
-                <label key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, cursor: 'pointer' }}>
+                <label key={c} className="access-check">
                  <input type="checkbox" checked={allowedChannels.includes(c)} onChange={() => toggleItem(allowedChannels, setAllowedChannels, c)} />
                  {c}
                </label>
              ))}
            </div>
          </div>
-          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+          <div className="form-actions">
            <button className="btn-small btn-primary" onClick={handleSave}>Save</button>
            <button className="btn-small" onClick={() => setEditing(false)}>Cancel</button>
          </div>
        </div>
-      </td>
-    </tr>
+      )}
+    </div>
  );
 }

@@ -173,7 +164,7 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {

  const [newSeason, setNewSeason] = useState<Omit<Season, 'Id'>>({
    Name: '',
-    HijriYear: new Date().getFullYear() - 579, // rough Gregorian → Hijri
+    HijriYear: new Date().getFullYear() - 579,
    StartDate: '',
    EndDate: '',
    Color: DEFAULT_COLORS[0],
@@ -238,42 +229,36 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
        <h2>{t('settings.seasons')}</h2>
        <p className="settings-hint">{t('settings.seasonsHint')}</p>

-        <div className="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>{t('settings.seasonName')}</th>
-                <th>{t('settings.startDate')}</th>
-                <th>{t('settings.endDate')}</th>
-                <th>{t('settings.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {loading ? (
-                <tr><td colSpan={4} style={{ textAlign: 'center', padding: 24 }}>Loading...</td></tr>
-              ) : (
-                seasons.map(s => (
-                  <SeasonRow key={s.Id} season={s} onSave={handleSave} onDelete={handleDelete} />
-                ))
-              )}
-              <tr className="add-row">
-                <td>
-                  <div className="season-edit-name">
-                    <input type="text" value={newSeason.Name} onChange={e => setNewSeason({ ...newSeason, Name: e.target.value })} placeholder={t('settings.namePlaceholder')} />
-                    <input type="number" value={newSeason.HijriYear} onChange={e => setNewSeason({ ...newSeason, HijriYear: parseInt(e.target.value) || 0 })} style={{ width: 80 }} />
-                    <input type="color" value={newSeason.Color} onChange={e => setNewSeason({ ...newSeason, Color: e.target.value })} />
-                  </div>
-                </td>
-                <td><input type="date" value={newSeason.StartDate} onChange={e => setNewSeason({ ...newSeason, StartDate: e.target.value })} /></td>
-                <td><input type="date" value={newSeason.EndDate} onChange={e => setNewSeason({ ...newSeason, EndDate: e.target.value })} /></td>
-                <td>
-                  <button className="btn-small btn-primary" onClick={handleCreate} disabled={!newSeason.Name || !newSeason.StartDate || !newSeason.EndDate}>
-                    {t('settings.add')}
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div className="settings-list">
+          {loading ? (
+            <div className="settings-loading">Loading...</div>
+          ) : (
+            seasons.map(s => (
+              <SeasonItem key={s.Id} season={s} onSave={handleSave} onDelete={handleDelete} />
+            ))
+          )}
+        </div>
+
+        <div className="settings-add-form">
+          <div className="settings-add-title">{t('settings.add')} Season</div>
+          <div className="form-row">
+            <input className="form-input" type="text" value={newSeason.Name} onChange={e => setNewSeason({ ...newSeason, Name: e.target.value })} placeholder={t('settings.namePlaceholder')} />
+            <input className="form-input form-input--sm" type="number" value={newSeason.HijriYear} onChange={e => setNewSeason({ ...newSeason, HijriYear: parseInt(e.target.value) || 0 })} />
+            <input type="color" className="form-color" value={newSeason.Color} onChange={e => setNewSeason({ ...newSeason, Color: e.target.value })} />
+          </div>
+          <div className="form-row">
+            <label className="form-field">
+              <span className="form-label">{t('settings.startDate')}</span>
+              <input className="form-input" type="date" value={newSeason.StartDate} onChange={e => setNewSeason({ ...newSeason, StartDate: e.target.value })} />
+            </label>
+            <label className="form-field">
+              <span className="form-label">{t('settings.endDate')}</span>
+              <input className="form-input" type="date" value={newSeason.EndDate} onChange={e => setNewSeason({ ...newSeason, EndDate: e.target.value })} />
+            </label>
+          </div>
+          <button className="btn-small btn-primary" onClick={handleCreate} disabled={!newSeason.Name || !newSeason.StartDate || !newSeason.EndDate}>
+            {t('settings.add')}
+          </button>
        </div>
      </div>

@@ -281,55 +266,37 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
        <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>Access</th>
-                <th>{t('settings.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {users.map(u => (
-                <UserRow
-                  key={u.Id}
-                  user={u}
-                  allMuseums={allMuseums}
-                  allChannels={allChannels}
-                  onUpdate={handleUpdateUser}
-                  onDelete={async (id) => { await deleteUser(id); await loadUsers(); }}
-                />
-              ))}
-              <tr className="add-row">
-                <td>
-                  <input type="text" value={newUser.Name} onChange={e => setNewUser({ ...newUser, Name: e.target.value })} placeholder={t('settings.userNamePlaceholder')} />
-                </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></td>
-                <td>
-                  <button className="btn-small btn-primary" onClick={async () => {
-                    if (!newUser.Name || !newUser.PIN) return;
-                    await createUser(newUser);
-                    setNewUser({ Name: '', PIN: '', Role: 'viewer', AllowedMuseums: '[]', AllowedChannels: '[]' });
-                    await loadUsers();
-                  }} disabled={!newUser.Name || !newUser.PIN}>
-                    {t('settings.add')}
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div className="settings-list">
+          {users.map(u => (
+            <UserItem
+              key={u.Id}
+              user={u}
+              allMuseums={allMuseums}
+              allChannels={allChannels}
+              onUpdate={handleUpdateUser}
+              onDelete={async (id) => { await deleteUser(id); await loadUsers(); }}
+            />
+          ))}
+        </div>
+
+        <div className="settings-add-form">
+          <div className="settings-add-title">{t('settings.add')} User</div>
+          <div className="form-row">
+            <input className="form-input" type="text" value={newUser.Name} onChange={e => setNewUser({ ...newUser, Name: e.target.value })} placeholder={t('settings.userNamePlaceholder')} />
+            <input className="form-input form-input--sm" type="text" value={newUser.PIN} onChange={e => setNewUser({ ...newUser, PIN: e.target.value })} placeholder="PIN" />
+            <select className="form-input form-input--sm" value={newUser.Role} onChange={e => setNewUser({ ...newUser, Role: e.target.value })}>
+              <option value="viewer">Viewer</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+          <button className="btn-small btn-primary" onClick={async () => {
+            if (!newUser.Name || !newUser.PIN) return;
+            await createUser(newUser);
+            setNewUser({ Name: '', PIN: '', Role: 'viewer', AllowedMuseums: '[]', AllowedChannels: '[]' });
+            await loadUsers();
+          }} disabled={!newUser.Name || !newUser.PIN}>
+            {t('settings.add')}
+          </button>
        </div>
      </div>
    </div>