1fbd894329
Aduce toate suprafetele dashboard-ului la grila tabelului Trimiteri, muta
navigarea intr-un meniu de cont (hamburger) si da panoului admin actiuni
reale de ciclu de viata. 9 stories, 3 valuri. UI pur (reskin + reasezare)
cu O SINGURA exceptie backend: modelul de stare a contului.
- US-001 sectiunea "Ajutor" eliminata din Acasa (wayfinding redundant).
- US-002 Nomenclator la grila standard (_submissions.html ca referinta).
- US-003 macro autosend compact (Manual<->Auto). Semantica de PREZENTA
`auto_send` (bifat->true, absent->false) NEALTERATA — compatibil cu ambele
parsere (Form(bool) la /mapari, bool(form.get()) la import). Zero backend.
- US-004 accounts.status (pending/active/blocked/archived/deleted), migrare
defensiva idempotenta derivata din `active`, gate worker claim_one pe
status='active' (echivalenta active=1 <=> status='active' pastrata).
- US-005 tabel Mapari compact + panou Ajutor (<details>, proza o singura data),
coloana "In coada".
- US-006 meniu hamburger dropdown (Cont/Integrare/Nomenclator/Admin/logout) +
context is_authenticated/is_admin/csrf_token defensiv in base.html.
- US-007 tab-bar redus la Acasa+Mapari; rutele /_fragments/{cont,integrare,
nomenclator} + deep-link ?tab= raman valide.
- US-008 rute admin block/archive/delete + bulk pe lista account_id,
require_admin + CSRF + PRG, dev id=1 sarit in bulk.
- US-009 admin UI: selectie bife + master + bara bulk + kebab per-rand,
grupare pe stare (bloc nou blocate/arhivate), nota "cont dev implicit" scoasa.
Stergere = SOFT: tombstone (status='deleted'), dar PII purjata IMEDIAT
(rar_creds_enc + chei API revocate + CUI eliberat pentru re-inregistrare),
GDPR/L.142.
VERIFY: 671 teste pass (+40). E2E browser (Playwright) a prins 2 bug-uri
invizibile la TestClient: bara bulk cu display:flex inline invingea [hidden]
(mutat in CSS .bulk-bar[hidden]); conturi arhivate cadeau sub "in asteptare"
(grupare pe status). /code-review high a prins 2 bug-uri reale: soft delete
pastra creds RAR + CUI la nesfarsit fara purjare accounts (GDPR neonorat);
apostrof in numele firmei rupea confirm() inline din kebab — ambele reparate,
plus cleanup boilerplate rute (_lifecycle_route).
Backend trimitere (worker masina stari/idempotenta/mapping) neatins, cu
exceptia gate-ului de cont. Design: docs/design/5.5-uniformizare-ui.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
237 lines
13 KiB
HTML
237 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Gateway RAR AUTOPASS{% endblock %}</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<script>
|
|
// US-002 (3.6): raspunsurile de editare-rand contin un <tr> (swap pe rand) PLUS
|
|
// elemente OOB non-rand (#preview-rezumat, #preview-ok-count). Fara fragmente-template,
|
|
// htmx parseaza raspunsul care incepe cu <tr> in context de tabel (<table><tbody>) si
|
|
// "foster-parent"-eaza div/span-urile OOB afara din fragment -> swapError + contoare pierdute.
|
|
// useTemplateFragments parseaza tot intr-un <template>, pastrand rand + OOB impreuna.
|
|
htmx.config.useTemplateFragments = true;
|
|
</script>
|
|
<script>
|
|
// Anti-FOUC (US-001 PRD 5.3): citeste preferinta tema din localStorage inainte de
|
|
// primul paint; seteaza data-theme pe <html> sincron, fara blink dark->light.
|
|
(function() {
|
|
try {
|
|
var t = localStorage.getItem('theme');
|
|
if (!t) {
|
|
t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
|
}
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
} catch(e) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
})();
|
|
</script>
|
|
<style>
|
|
:root { --bg:#0f1115; --card:#181b22; --ink:#e6e9ef; --muted:#8b93a7; --line:#262b36;
|
|
--ok:#3ecf8e; --warn:#e6b34a; --err:#e5605e; --accent:#5b8def; }
|
|
[data-theme="light"] { --bg:#f6f7f9; --card:#ffffff; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea;
|
|
--ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#2563eb; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; font:15px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
|
|
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
|
|
header h1 { font-size:20px; margin:0; font-weight:700; letter-spacing:-.01em; }
|
|
header .env { font-size:12px; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:99px; }
|
|
main { padding:24px; max-width:1100px; margin:0 auto; }
|
|
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px; }
|
|
.banner { border-left:3px solid var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); }
|
|
.banner.hidden { display:none; }
|
|
/* Tabelele de date au multe coloane; pe ecrane inguste scroll IN card, nu
|
|
impinge layout-ul paginii (altfel toata pagina scrolleaza orizontal). */
|
|
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
|
table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
|
|
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
|
|
th { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
|
|
.empty { color:var(--muted); padding:24px; text-align:center; }
|
|
.pill { font-size:12px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
|
|
.s-queued{color:var(--accent);} .s-sending{color:var(--warn);} .s-sent{color:var(--ok);}
|
|
.s-error,.s-needs_data,.s-needs_mapping{color:var(--err);}
|
|
.s-ok{color:var(--ok);}
|
|
.s-needs_review{color:var(--warn);}
|
|
.s-already_sent,.s-duplicate_in_file{color:var(--muted);}
|
|
.muted { color:var(--muted); }
|
|
a { color:var(--accent); }
|
|
/* Drop zone upload fisier */
|
|
.drop-zone { border:2px dashed var(--line); border-radius:8px; padding:32px 20px;
|
|
text-align:center; transition:border-color .15s,background .15s; }
|
|
.drop-zone.drag-over { border-color:var(--accent); background:rgba(91,141,239,.05); }
|
|
/* Banner varianta warn (nu eroare) */
|
|
.banner.warn { border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--card)); }
|
|
/* Bara confirmare sticky */
|
|
.sticky-bar { position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line);
|
|
padding:12px 16px; display:flex; align-items:flex-start; gap:16px;
|
|
flex-wrap:wrap; z-index:10; }
|
|
/* Indicator HTMX — ascuns pana la request */
|
|
.htmx-indicator { display:none; }
|
|
.htmx-indicator.htmx-request { display:inline; }
|
|
/* Link-uri de actiune in antetul cardurilor: zona de atins mai mare (>=36px) si
|
|
feedback la hover; pe ecrane inguste antetul se rupe curat sub titlu. */
|
|
.cardlink { font-size:13px; padding:7px 10px; border-radius:6px; display:inline-flex;
|
|
align-items:center; min-height:36px; white-space:nowrap; }
|
|
.cardlink:hover { background:var(--line); }
|
|
.flash { background:color-mix(in srgb, var(--ok) 12%, var(--card)); border-left:3px solid var(--ok); padding:8px 12px; border-radius:6px;
|
|
margin:0 0 12px; font-size:13px; }
|
|
.maprow { display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);
|
|
flex-wrap:wrap; }
|
|
.maprow:last-child { border-bottom:0; }
|
|
.mapcol.grow { flex:1 1 280px; min-width:240px; }
|
|
.sugg { color:var(--accent); }
|
|
select, button, input[type=text] { font:inherit; background:var(--bg); color:var(--ink);
|
|
border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
|
|
select { max-width:340px; }
|
|
button { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; }
|
|
button:hover { filter:brightness(1.08); }
|
|
.chk { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
|
|
/* Tab-bar (US-003) */
|
|
.tab-bar { display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
|
|
border-bottom:1px solid var(--line); margin-bottom:16px; padding-bottom:0;
|
|
scrollbar-width:none; }
|
|
.tab-bar::-webkit-scrollbar { display:none; }
|
|
.tab-link { display:inline-flex; align-items:center; padding:8px 16px; font-size:14px;
|
|
font-weight:500; color:var(--muted); text-decoration:none; border-radius:6px 6px 0 0;
|
|
border:1px solid transparent; border-bottom:none; white-space:nowrap;
|
|
transition:color .12s, background .12s; margin-bottom:-1px; }
|
|
.tab-link:hover { color:var(--ink); background:var(--line); }
|
|
.tab-link.tab-activ { color:var(--ink); background:var(--card);
|
|
border-color:var(--line); border-bottom-color:var(--card); }
|
|
.tab-panel { min-height:120px; }
|
|
.status-bar { margin-bottom:12px; }
|
|
/* Eroare 3 niveluri (US-006, PRD 5.4) */
|
|
.eroare-3n { margin-top:10px; }
|
|
.eroare-3n-item { padding:8px 10px; border-left:3px solid var(--err);
|
|
background:color-mix(in srgb, var(--err) 8%, var(--card));
|
|
border-radius:0 6px 6px 0; }
|
|
.eroare-3n-sep { margin-top:6px; }
|
|
.eroare-3n-problema { font-weight:600; color:var(--err); font-size:13px; }
|
|
.eroare-3n-camp { font-family:monospace; font-size:12px; opacity:.85; }
|
|
.eroare-3n-cauza { color:var(--muted); font-size:12px; margin-top:3px; }
|
|
.eroare-3n-fix { color:var(--accent); font-size:12px; margin-top:3px; }
|
|
.eroare-3n-label { font-weight:500; }
|
|
/* Inline fix per camp in preview */
|
|
.camp-fix { color:var(--accent); font-size:11px; margin-top:2px; display:block; }
|
|
/* Meniu hamburger cont (US-006 PRD 5.5) — dropdown ancorat dreapta-sus */
|
|
.cont-menu-wrap { position:relative; }
|
|
.icon-btn { background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer;
|
|
border-radius:6px; min-height:36px; min-width:36px; font-size:16px; padding:4px 8px;
|
|
line-height:1; display:inline-flex; align-items:center; justify-content:center; }
|
|
.icon-btn:hover { background:var(--line); }
|
|
.cont-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:180px; z-index:50;
|
|
background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px;
|
|
box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:2px; }
|
|
.cont-menu[hidden] { display:none; }
|
|
.cont-menu a, .cont-menu button { display:block; width:100%; text-align:left; background:transparent;
|
|
border:none; color:var(--ink); text-decoration:none; font:inherit; padding:8px 10px;
|
|
border-radius:6px; cursor:pointer; min-height:36px; }
|
|
.cont-menu a:hover, .cont-menu button:hover { background:var(--line); }
|
|
.cont-menu hr { border:none; border-top:1px solid var(--line); margin:4px 0; }
|
|
.cont-menu form { margin:0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Gateway RAR AUTOPASS</h1>
|
|
<span class="env">{{ rar_env }}</span>
|
|
<div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
|
|
<button id="tema-toggle" class="icon-btn"
|
|
aria-label="Comuta tema (luminos/intunecat)"
|
|
title="Comuta tema">☀</button>
|
|
<span class="muted" style="font-size:13px;">v{{ version }}</span>
|
|
{% if is_authenticated|default(false) %}
|
|
{# Meniu cont (US-006 PRD 5.5): Cont/Integrare/Nomenclator + (admin) + logout.
|
|
Pe paginile neautentificate (login/signup) nu se randeaza deloc. #}
|
|
<div class="cont-menu-wrap">
|
|
<button id="cont-menu-toggle" class="icon-btn"
|
|
aria-haspopup="true" aria-expanded="false" aria-controls="cont-menu"
|
|
aria-label="Meniu cont" title="Meniu cont">☰</button>
|
|
<div id="cont-menu" class="cont-menu" role="menu" aria-labelledby="cont-menu-toggle" hidden>
|
|
<a role="menuitem" href="/?tab=cont">Cont</a>
|
|
<a role="menuitem" href="/?tab=integrare">Integrare</a>
|
|
<a role="menuitem" href="/?tab=nomenclator">Nomenclator</a>
|
|
{% if is_admin|default(false) %}<a role="menuitem" href="/admin">Panou admin</a>{% endif %}
|
|
<hr>
|
|
<form method="post" action="/logout">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token|default('') }}">
|
|
<button role="menuitem" type="submit">Iesi din cont</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
<main>{% block content %}{% endblock %}</main>
|
|
<script>
|
|
// Handler comutator tema (US-002 PRD 5.3): click toggle light<->dark, persista in localStorage.
|
|
// Separare init (doar sincronizare iconita) de persistenta (doar la click explicit).
|
|
// Motivatie: scrierea in localStorage la init ar ingloba imediat preferinta OS-aware ca alegere
|
|
// explicita, impiedicand urmarirea ulterioara a modificarilor de tema ale sistemului de operare.
|
|
(function() {
|
|
var btn = document.getElementById('tema-toggle');
|
|
if (!btn) return;
|
|
// Sincronizeaza iconita si aria-label dupa tema curenta -- FARA efecte secundare in localStorage.
|
|
function _syncIcon(t) {
|
|
if (t === 'light') {
|
|
btn.innerHTML = '☾';
|
|
btn.setAttribute('aria-label', 'Comuta tema (intunecat)');
|
|
btn.title = 'Comuta tema (intunecat)';
|
|
} else {
|
|
btn.innerHTML = '☀';
|
|
btn.setAttribute('aria-label', 'Comuta tema (luminos)');
|
|
btn.title = 'Comuta tema (luminos)';
|
|
}
|
|
}
|
|
// Aplica o tema noua, seteaza data-theme si persista in localStorage -- apelat DOAR la click.
|
|
function _setTheme(t) {
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
try { localStorage.setItem('theme', t); } catch(e) {}
|
|
_syncIcon(t);
|
|
}
|
|
// La init: sincronizeaza doar iconita din data-theme curent (setat deja de scriptul anti-FOUC).
|
|
_syncIcon(document.documentElement.getAttribute('data-theme') || 'dark');
|
|
btn.addEventListener('click', function() {
|
|
var cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
_setTheme(cur === 'dark' ? 'light' : 'dark');
|
|
});
|
|
})();
|
|
</script>
|
|
<script>
|
|
// Meniu cont (US-006 PRD 5.5): dropdown ancorat dreapta-sus. Deschide/inchide la click,
|
|
// inchide la Esc (focus readus pe buton) si la click in afara. Fara dependente.
|
|
(function() {
|
|
var toggle = document.getElementById('cont-menu-toggle');
|
|
var menu = document.getElementById('cont-menu');
|
|
if (!toggle || !menu) return;
|
|
function open() {
|
|
menu.hidden = false;
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
document.addEventListener('click', onDocClick, true);
|
|
document.addEventListener('keydown', onKey, true);
|
|
}
|
|
function close(refocus) {
|
|
menu.hidden = true;
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
document.removeEventListener('click', onDocClick, true);
|
|
document.removeEventListener('keydown', onKey, true);
|
|
if (refocus) toggle.focus();
|
|
}
|
|
function onDocClick(e) {
|
|
if (!menu.contains(e.target) && e.target !== toggle) close(false);
|
|
}
|
|
function onKey(e) {
|
|
if (e.key === 'Escape') { e.preventDefault(); close(true); }
|
|
}
|
|
toggle.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
if (menu.hidden) open(); else close(false);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|