fix: tabulka roli a bank. uctu - admin-table-wrapper -> admin-table-responsive

- Settings.jsx: pridany admin-card-body + admin-table-responsive
- CompanySettings.jsx: admin-table-wrapper -> admin-table-responsive
- zadny admin-table-wrapper v JSX nezbyva

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-13 11:29:10 +01:00
parent 10fbb9ebc7
commit 308941449e
37 changed files with 107 additions and 105 deletions

View File

@@ -546,7 +546,7 @@ export default function CompanySettings() {
) : (
<>
{bankAccounts.length > 0 && (
<div className="admin-table-wrapper" style={{ marginBottom: 16 }}>
<div className="admin-table-responsive mb-4">
<table className="admin-table">
<thead>
<tr>

View File

@@ -391,74 +391,76 @@ export default function Settings() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.2 }}
>
<div className="admin-table-wrapper">
<table className="admin-table">
<thead>
<tr>
<th>Název</th>
<th>Popis</th>
<th>Oprávnění</th>
<th>Uživatelé</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
{roles.map((role) => (
<tr key={role.id}>
<td>
<div style={{ fontWeight: 500, color: 'var(--text-primary)' }}>
{role.display_name}
</div>
<div style={{ fontSize: '0.75rem', color: 'var(--text-tertiary)' }}>
{role.name}
</div>
</td>
<td style={{ color: 'var(--text-secondary)' }}>
{role.description || '—'}
</td>
<td>
<span className="admin-badge admin-badge-info">
{isAdminRole(role) ? 'Vše' : role.permission_count}
</span>
</td>
<td>
<span className="admin-badge admin-badge-secondary">
{role.user_count}
</span>
</td>
<td>
{!isAdminRole(role) && (
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button
onClick={() => openEditModal(role)}
className="admin-btn-icon"
title="Upravit"
aria-label="Upravit"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
<button
onClick={() => setDeleteConfirm({ show: true, role })}
className="admin-btn-icon danger"
title={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
aria-label={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
disabled={role.user_count > 0}
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg>
</button>
</div>
)}
</td>
<div className="admin-card-body">
<div className="admin-table-responsive">
<table className="admin-table">
<thead>
<tr>
<th>Název</th>
<th>Popis</th>
<th>Oprávnění</th>
<th>Uživatelé</th>
<th>Akce</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{roles.map((role) => (
<tr key={role.id}>
<td>
<div style={{ fontWeight: 500, color: 'var(--text-primary)' }}>
{role.display_name}
</div>
<div style={{ fontSize: '0.75rem', color: 'var(--text-tertiary)' }}>
{role.name}
</div>
</td>
<td style={{ color: 'var(--text-secondary)' }}>
{role.description || '—'}
</td>
<td>
<span className="admin-badge admin-badge-info">
{isAdminRole(role) ? 'Vše' : role.permission_count}
</span>
</td>
<td>
<span className="admin-badge admin-badge-secondary">
{role.user_count}
</span>
</td>
<td>
{!isAdminRole(role) && (
<div className="flex-row gap-2">
<button
onClick={() => openEditModal(role)}
className="admin-btn-icon"
title="Upravit"
aria-label="Upravit"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
<button
onClick={() => setDeleteConfirm({ show: true, role })}
className="admin-btn-icon danger"
title={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
aria-label={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
disabled={role.user_count > 0}
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg>
</button>
</div>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</motion.div>}