romfast/gomag-vending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): fix pill counts and Bootstrap UI cleanup

Browse Source 
- IMPORTED pill now includes ALREADY_IMPORTED orders in count
- UNINVOICED filter includes ALREADY_IMPORTED orders
- Pill counts (Toate/Importate/Omise/Erori/Nefacturate) always reflect
  full period+search, independent of active status filter
- Nefacturate count computed from SQLite cache across full period,
  not just current page
- Bootstrap UI: design tokens, soft badge pills, consistent font sizes,
  purge inline styles from templates, move badge-pct to style.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-14 21:05:43 +00:00
parent b69b5e7104
commit 15ccbe028a
8 changed files with 283 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
api/app/routers/sync.py
View File

@@ -377,19 +377,18 @@ async def dashboard_orders(page: int = 1, per_page: int = 50,
o["billing_name"] = b_name o["billing_name"] = b_name
o["is_different_person"] = bool(s_name and b_name and s_name != b_name) o["is_different_person"] = bool(s_name and b_name and s_name != b_name)
# Build period-total counts (across all pages, same filters) # Use counts from sqlite_service (already period-scoped)
nefacturate_count = sum(
1 for o in all_orders
if o.get("status") == "IMPORTED" and not o.get("invoice")
)
# Use counts from sqlite_service (already period-scoped) and add nefacturate
counts = result.get("counts", {}) counts = result.get("counts", {})
counts["nefacturate"] = nefacturate_count # Prefer SQLite-based uninvoiced count (covers full period, not just current page)
counts["nefacturate"] = counts.get("uninvoiced_sqlite", sum(
1 for o in all_orders
if o.get("status") in ("IMPORTED", "ALREADY_IMPORTED") and not o.get("invoice")
))
counts.setdefault("total", counts.get("imported", 0) + counts.get("skipped", 0) + counts.get("error", 0)) counts.setdefault("total", counts.get("imported", 0) + counts.get("skipped", 0) + counts.get("error", 0))
# For UNINVOICED filter: apply server-side filtering + pagination # For UNINVOICED filter: apply server-side filtering + pagination
if is_uninvoiced_filter: if is_uninvoiced_filter:
filtered = [o for o in all_orders if o.get("status") == "IMPORTED" and not o.get("invoice")] filtered = [o for o in all_orders if o.get("status") in ("IMPORTED", "ALREADY_IMPORTED") and not o.get("invoice")]
total = len(filtered) total = len(filtered)
offset = (page - 1) * per_page offset = (page - 1) * per_page
result["orders"] = filtered[offset:offset + per_page] result["orders"] = filtered[offset:offset + per_page]

56
api/app/services/sqlite_service.py
View File

@@ -623,25 +623,34 @@ async def get_orders(page: int = 1, per_page: int = 50,
""" """
db = await get_sqlite() db = await get_sqlite()
try: try:
where_clauses = [] # Period + search clauses (used for counts — never include status filter)
params = [] base_clauses = []
base_params = []
if period_days and period_days > 0: if period_days and period_days > 0:
where_clauses.append("order_date >= date('now', ?)") base_clauses.append("order_date >= date('now', ?)")
params.append(f"-{period_days} days") base_params.append(f"-{period_days} days")
elif period_days == 0 and period_start and period_end: elif period_days == 0 and period_start and period_end:
where_clauses.append("order_date BETWEEN ? AND ?") base_clauses.append("order_date BETWEEN ? AND ?")
params.extend([period_start, period_end]) base_params.extend([period_start, period_end])
if search: if search:
where_clauses.append("(order_number LIKE ? OR customer_name LIKE ?)") base_clauses.append("(order_number LIKE ? OR customer_name LIKE ?)")
params.extend([f"%{search}%", f"%{search}%"]) base_params.extend([f"%{search}%", f"%{search}%"])
# Data query adds status filter on top of base filters
data_clauses = list(base_clauses)
data_params = list(base_params)
if status_filter and status_filter not in ("all", "UNINVOICED"): if status_filter and status_filter not in ("all", "UNINVOICED"):
where_clauses.append("UPPER(status) = ?") if status_filter.upper() == "IMPORTED":
params.append(status_filter.upper()) data_clauses.append("UPPER(status) IN ('IMPORTED', 'ALREADY_IMPORTED')")
else:
data_clauses.append("UPPER(status) = ?")
data_params.append(status_filter.upper())
where = ("WHERE " + " AND ".join(where_clauses)) if where_clauses else "" where = ("WHERE " + " AND ".join(data_clauses)) if data_clauses else ""
counts_where = ("WHERE " + " AND ".join(base_clauses)) if base_clauses else ""
allowed_sort = {"order_date", "order_number", "customer_name", "items_count", allowed_sort = {"order_date", "order_number", "customer_name", "items_count",
"status", "first_seen_at", "updated_at"} "status", "first_seen_at", "updated_at"}
@@ -650,7 +659,7 @@ async def get_orders(page: int = 1, per_page: int = 50,
if sort_dir.lower() not in ("asc", "desc"): if sort_dir.lower() not in ("asc", "desc"):
sort_dir = "desc" sort_dir = "desc"
cursor = await db.execute(f"SELECT COUNT(*) FROM orders {where}", params) cursor = await db.execute(f"SELECT COUNT(*) FROM orders {where}", data_params)
total = (await cursor.fetchone())[0] total = (await cursor.fetchone())[0]
offset = (page - 1) * per_page offset = (page - 1) * per_page
@@ -659,17 +668,26 @@ async def get_orders(page: int = 1, per_page: int = 50,
{where} {where}
ORDER BY {sort_by} {sort_dir} ORDER BY {sort_by} {sort_dir}
LIMIT ? OFFSET ? LIMIT ? OFFSET ?
""", params + [per_page, offset]) """, data_params + [per_page, offset])
rows = await cursor.fetchall() rows = await cursor.fetchall()
# Counts by status (on full period, not just this page) # Counts by status — always on full period+search, never filtered by status
cursor = await db.execute(f""" cursor = await db.execute(f"""
SELECT status, COUNT(*) as cnt FROM orders SELECT status, COUNT(*) as cnt FROM orders
{where} {counts_where}
GROUP BY status GROUP BY status
""", params) """, base_params)
status_counts = {row["status"]: row["cnt"] for row in await cursor.fetchall()} status_counts = {row["status"]: row["cnt"] for row in await cursor.fetchall()}
# Uninvoiced count: IMPORTED/ALREADY_IMPORTED with no cached invoice, same period+search
uninv_clauses = list(base_clauses) + [
"UPPER(status) IN ('IMPORTED', 'ALREADY_IMPORTED')",
"(factura_numar IS NULL OR factura_numar = '')",
]
uninv_where = "WHERE " + " AND ".join(uninv_clauses)
cursor = await db.execute(f"SELECT COUNT(*) FROM orders {uninv_where}", base_params)
uninvoiced_sqlite = (await cursor.fetchone())[0]
return { return {
"orders": [dict(r) for r in rows], "orders": [dict(r) for r in rows],
"total": total, "total": total,
@@ -678,10 +696,12 @@ async def get_orders(page: int = 1, per_page: int = 50,
"pages": (total + per_page - 1) // per_page if total > 0 else 0, "pages": (total + per_page - 1) // per_page if total > 0 else 0,
"counts": { "counts": {
"imported": status_counts.get("IMPORTED", 0), "imported": status_counts.get("IMPORTED", 0),
"already_imported": status_counts.get("ALREADY_IMPORTED", 0),
"imported_all": status_counts.get("IMPORTED", 0) + status_counts.get("ALREADY_IMPORTED", 0),
"skipped": status_counts.get("SKIPPED", 0), "skipped": status_counts.get("SKIPPED", 0),
"error": status_counts.get("ERROR", 0), "error": status_counts.get("ERROR", 0),
"already_imported": status_counts.get("ALREADY_IMPORTED", 0), "total": sum(status_counts.values()),
"total": sum(status_counts.values()) "uninvoiced_sqlite": uninvoiced_sqlite,
} }
} }
finally: finally:

386
api/app/static/css/style.css
View File

@@ -1,21 +1,44 @@
/* ── Design tokens ───────────────────────────────── */
:root { :root {
--sidebar-width: 220px; /* Sidebar */
--sidebar-bg: #1e293b; --sidebar-width: 224px;
--sidebar-text: #94a3b8; --sidebar-bg: #111827;
--sidebar-active: #ffffff; --sidebar-text: #d1d5db;
--sidebar-hover-bg: #334155; --sidebar-active-bg: #1f2937;
--body-bg: #f1f5f9; --sidebar-active-text: #ffffff;
--card-shadow: 0 1px 3px rgba(0,0,0,0.08); --sidebar-border: #374151;
/* Surfaces */
--body-bg: #f9fafb;
--card-bg: #ffffff;
--card-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
--card-radius: 0.5rem;
/* Semantic colors */
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--green-100: #dcfce7; --green-800: #166534;
--yellow-100: #fef9c3; --yellow-800: #854d0e;
--red-100: #fee2e2; --red-800: #991b1b;
--blue-100: #dbeafe; --blue-800: #1e40af;
/* Text */
--text-primary: #111827;
--text-secondary: #4b5563;
--text-muted: #6b7280;
--border-color: #e5e7eb;
} }
/* ── Base ────────────────────────────────────────── */
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 0.875rem;
background-color: var(--body-bg); background-color: var(--body-bg);
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Sidebar */ /* ── Sidebar ─────────────────────────────────────── */
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -31,7 +54,7 @@ body {
.sidebar-header { .sidebar-header {
padding: 1.25rem 1rem; padding: 1.25rem 1rem;
border-bottom: 1px solid #334155; border-bottom: 1px solid var(--sidebar-border);
} }
.sidebar-header h5 { .sidebar-header h5 {
@@ -43,21 +66,22 @@ body {
.sidebar .nav-link { .sidebar .nav-link {
color: var(--sidebar-text); color: var(--sidebar-text);
padding: 0.65rem 1rem; font-size: 0.875rem;
font-size: 0.9rem; font-weight: 500;
border-left: 3px solid transparent; padding: 0.5rem 0.75rem;
transition: all 0.15s ease; border-radius: 0.375rem;
margin: 0.125rem 0.5rem;
transition: background 0.15s, color 0.15s;
} }
.sidebar .nav-link:hover { .sidebar .nav-link:hover {
color: var(--sidebar-active); color: var(--sidebar-active-text);
background-color: var(--sidebar-hover-bg); background-color: var(--sidebar-active-bg);
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: var(--sidebar-active); color: var(--sidebar-active-text);
background-color: var(--sidebar-hover-bg); background-color: var(--sidebar-active-bg);
border-left-color: #3b82f6;
} }
.sidebar .nav-link i { .sidebar .nav-link i {
@@ -70,18 +94,18 @@ body {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-top: 1px solid #334155; border-top: 1px solid var(--sidebar-border);
width: 100%; width: 100%;
} }
/* Main content */ /* ── Main content ────────────────────────────────── */
.main-content { .main-content {
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
padding: 1.5rem; padding: 1.5rem;
min-height: 100vh; min-height: 100vh;
} }
/* Sidebar toggle button for mobile */ /* ── Sidebar toggle (mobile) ─────────────────────── */
.sidebar-toggle { .sidebar-toggle {
position: fixed; position: fixed;
top: 0.5rem; top: 0.5rem;
@@ -90,100 +114,102 @@ body {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
/* Cards */ /* ── Cards ───────────────────────────────────────── */
.card { .card {
border: none; border: none;
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
border-radius: 0.5rem; border-radius: var(--card-radius);
background: var(--card-bg);
} }
.card-header { .card-header {
background-color: #fff; background: var(--card-bg);
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border-color);
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.875rem;
padding: 0.75rem 1rem;
} }
/* Status badges */ /* ── Tables ──────────────────────────────────────── */
.badge-imported { background-color: #22c55e; }
.badge-skipped { background-color: #eab308; color: #000; }
.badge-error { background-color: #ef4444; }
.badge-pending { background-color: #94a3b8; }
.badge-ready { background-color: #3b82f6; }
/* Tables */
.table { .table {
font-size: 0.875rem; font-size: 0.875rem;
} }
.table th { .table th {
font-weight: 600; font-size: 0.75rem;
color: #475569; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background: #f9fafb;
padding: 0.75rem 1rem;
border-top: none; border-top: none;
} }
/* Forms */ .table td {
.form-control:focus, .form-select:focus { padding: 0.75rem 1rem;
border-color: #3b82f6; color: var(--text-secondary);
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
} }
/* Responsive */ /* ── Badges — soft pill style ────────────────────── */
@media (max-width: 767.98px) { .badge {
.sidebar { font-size: 0.75rem;
transform: translateX(-100%); font-weight: 500;
} padding: 0.125rem 0.5rem;
.sidebar.show { border-radius: 9999px;
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.sidebar-toggle {
display: block !important;
}
} }
/* Autocomplete dropdown */ .badge.bg-success { background: var(--green-100) !important; color: var(--green-800) !important; }
.autocomplete-dropdown { .badge.bg-info { background: var(--blue-100) !important; color: var(--blue-800) !important; }
position: absolute; .badge.bg-warning { background: var(--yellow-100) !important; color: var(--yellow-800) !important; }
z-index: 1050; .badge.bg-danger { background: var(--red-100) !important; color: var(--red-800) !important; }
background: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-height: 300px;
overflow-y: auto;
width: 100%;
}
.autocomplete-item { /* Legacy badge classes */
padding: 0.5rem 0.75rem; .badge-imported { background: var(--green-100); color: var(--green-800); }
cursor: pointer; .badge-skipped { background: var(--yellow-100); color: var(--yellow-800); }
.badge-error { background: var(--red-100); color: var(--red-800); }
.badge-pending { background: #f3f4f6; color: #374151; }
.badge-ready { background: var(--blue-100); color: var(--blue-800); }
/* ── Buttons ─────────────────────────────────────── */
.btn {
font-size: 0.875rem; font-size: 0.875rem;
border-bottom: 1px solid #f1f5f9; border-radius: 0.375rem;
} }
.autocomplete-item:hover, .autocomplete-item.active { .btn-sm {
background-color: #f1f5f9; font-size: 0.875rem;
padding: 0.375rem 0.75rem;
} }
.autocomplete-item .codmat { .btn-primary {
font-weight: 600; background: var(--blue-600);
color: #1e293b; border-color: var(--blue-600);
}
.btn-primary:hover {
background: var(--blue-700);
border-color: var(--blue-700);
} }
.autocomplete-item .denumire { /* ── Forms ───────────────────────────────────────── */
color: #64748b; .form-control, .form-select {
font-size: 0.8rem; font-size: 0.875rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
border-color: #d1d5db;
} }
/* Pagination */ .form-control:focus, .form-select:focus {
border-color: var(--blue-600);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
/* ── Pagination ──────────────────────────────────── */
.pagination .page-link { .pagination .page-link {
font-size: 0.875rem; font-size: 0.875rem;
} }
/* Loading spinner */ /* ── Loading spinner ─────────────────────────────── */
.spinner-overlay { .spinner-overlay {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
@@ -194,7 +220,7 @@ body {
justify-content: center; justify-content: center;
} }
/* Log viewer */ /* ── Log viewer (dark theme — keep as-is) ────────── */
.log-viewer { .log-viewer {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.8125rem; font-size: 0.8125rem;
@@ -210,107 +236,74 @@ body {
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 0.5rem 0.5rem;
} }
/* Clickable table rows */ /* ── Clickable table rows ────────────────────────── */
.table-hover tbody tr[data-href] { .table-hover tbody tr[data-href] {
cursor: pointer; cursor: pointer;
} }
.table-hover tbody tr[data-href]:hover { .table-hover tbody tr[data-href]:hover {
background-color: #e2e8f0; background-color: #f9fafb;
} }
/* Sortable table headers (R7) */ /* ── Sortable table headers ──────────────────────── */
.sortable { .sortable {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.sortable:hover { .sortable:hover {
background-color: #f1f5f9; background-color: #f3f4f6;
} }
.sort-icon { .sort-icon {
font-size: 0.75rem; font-size: 0.75rem;
margin-left: 0.25rem; margin-left: 0.25rem;
color: #3b82f6; color: var(--blue-600);
} }
/* SKU group visual grouping (R6) */ /* ── SKU group visual grouping ───────────────────── */
.sku-group-even {
/* default background */
}
.sku-group-odd { .sku-group-odd {
background-color: #f8fafc; background-color: #f8fafc;
} }
/* Editable cells */ /* ── Editable cells ──────────────────────────────── */
.editable { .editable { cursor: pointer; }
cursor: pointer; .editable:hover { background-color: #f3f4f6; }
}
.editable:hover {
background-color: #e2e8f0;
}
/* Order detail modal items */ /* ── Order detail modal ──────────────────────────── */
.modal-lg .table-sm td, .modal-lg .table-sm td,
.modal-lg .table-sm th { .modal-lg .table-sm th {
font-size: 0.8125rem; font-size: 0.8125rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
} }
/* Filter button badges */ /* ── Modal stacking (quickMap over orderDetail) ───── */
#orderFilterBtns .badge { #quickMapModal { z-index: 1060; }
font-size: 0.7rem;
}
/* Modal stacking for quickMap over orderDetail */
#quickMapModal {
z-index: 1060;
}
#quickMapModal + .modal-backdrop, #quickMapModal + .modal-backdrop,
.modal-backdrop ~ .modal-backdrop { .modal-backdrop ~ .modal-backdrop { z-index: 1055; }
z-index: 1055;
}
/* Deleted mapping rows */ /* ── Deleted mapping rows ────────────────────────── */
tr.mapping-deleted td { tr.mapping-deleted td {
text-decoration: line-through; text-decoration: line-through;
opacity: 0.5; opacity: 0.5;
} }
/* Map icon button (minimal, no border) */ /* ── Map icon button ─────────────────────────────── */
.btn-map-icon { .btn-map-icon {
color: #3b82f6; color: var(--blue-600);
padding: 0.1rem 0.25rem; padding: 0.1rem 0.25rem;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
text-decoration: none; text-decoration: none;
} }
.btn-map-icon:hover { .btn-map-icon:hover { color: var(--blue-700); }
color: #1d4ed8;
}
/* Last sync summary card columns */ /* ── Last sync summary card columns ─────────────── */
.last-sync-col { .last-sync-col {
border-right: 1px solid #e2e8f0; border-right: 1px solid var(--border-color);
} }
/* Dashboard filter badges */ /* ── Cursor pointer utility ──────────────────────── */
#dashFilterBtns .badge { .cursor-pointer { cursor: pointer; }
font-size: 0.7rem;
}
/* Cursor pointer utility */ /* ── Filter bar ──────────────────────────────────── */
.cursor-pointer {
cursor: pointer;
}
/* ── Typography scale ────────────────────────────── */
.text-header { font-size: 1.25rem; font-weight: 600; }
.text-card-head { font-size: 1rem; font-weight: 600; }
.text-body { font-size: 0.8125rem; }
.text-badge { font-size: 0.75rem; }
.text-label { font-size: 0.6875rem; }
/* ── Filter bar — shared across dashboard, mappings, missing_skus pages ── */
.filter-bar { .filter-bar {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -318,49 +311,84 @@ tr.mapping-deleted td {
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.625rem 0; padding: 0.625rem 0;
} }
.filter-pill { .filter-pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.3rem; gap: 0.3rem;
padding: 0.25rem 0.625rem; padding: 0.375rem 0.75rem;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 999px; border-radius: 0.375rem;
background: #fff; background: #fff;
font-size: 0.8125rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: background 0.15s, border-color 0.15s; transition: background 0.15s, border-color 0.15s;
white-space: nowrap; white-space: nowrap;
} }
.filter-pill:hover { background: #f3f4f6; } .filter-pill:hover { background: #f3f4f6; }
.filter-pill.active { .filter-pill.active {
background: #1d4ed8; background: var(--blue-700);
border-color: #1d4ed8; border-color: var(--blue-700);
color: #fff; color: #fff;
} }
.filter-pill.active .filter-count { background: rgba(255,255,255,0.25); color: #fff; } .filter-pill.active .filter-count {
background: rgba(255,255,255,0.25);
color: #fff;
}
.filter-count { .filter-count {
display: inline-block; display: inline-block;
min-width: 1.25rem; min-width: 1.25rem;
padding: 0 0.3rem; padding: 0 0.3rem;
border-radius: 999px; border-radius: 999px;
background: #e5e7eb; background: #e5e7eb;
font-size: 0.7rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
line-height: 1.4; line-height: 1.4;
} }
/* ── Search input (used in filter bars) ─────────── */ /* ── Search input ────────────────────────────────── */
.search-input { .search-input {
margin-left: auto; margin-left: auto;
padding: 0.25rem 0.625rem; padding: 0.375rem 0.75rem;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 6px; border-radius: 0.375rem;
font-size: 0.8125rem; font-size: 0.875rem;
outline: none; outline: none;
min-width: 180px; min-width: 180px;
} }
.search-input:focus { border-color: #1d4ed8; } .search-input:focus { border-color: var(--blue-600); }
/* ── Autocomplete dropdown (keep as-is) ──────────── */
.autocomplete-dropdown {
position: absolute;
z-index: 1050;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-height: 300px;
overflow-y: auto;
width: 100%;
}
.autocomplete-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.875rem;
border-bottom: 1px solid #f1f5f9;
}
.autocomplete-item:hover, .autocomplete-item.active {
background-color: #f1f5f9;
}
.autocomplete-item .codmat {
font-weight: 600;
color: #1e293b;
}
.autocomplete-item .denumire {
color: #64748b;
font-size: 0.8rem;
}
/* ── Tooltip for Client/Cont ─────────────────────── */ /* ── Tooltip for Client/Cont ─────────────────────── */
.tooltip-cont { .tooltip-cont {
@@ -389,8 +417,8 @@ tr.mapping-deleted td {
/* ── Sync card ───────────────────────────────────── */ /* ── Sync card ───────────────────────────────────── */
.sync-card { .sync-card {
background: #fff; background: #fff;
border: 1px solid #e5e7eb; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--card-radius);
overflow: hidden; overflow: hidden;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -403,7 +431,7 @@ tr.mapping-deleted td {
} }
.sync-card-divider { .sync-card-divider {
height: 1px; height: 1px;
background: #e5e7eb; background: var(--border-color);
margin: 0; margin: 0;
} }
.sync-card-info { .sync-card-info {
@@ -411,8 +439,8 @@ tr.mapping-deleted td {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.8125rem; font-size: 0.875rem;
color: #6b7280; color: var(--text-muted);
cursor: pointer; cursor: pointer;
transition: background 0.12s; transition: background 0.12s;
} }
@@ -423,12 +451,12 @@ tr.mapping-deleted td {
gap: 0.5rem; gap: 0.5rem;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
background: #eff6ff; background: #eff6ff;
font-size: 0.8125rem; font-size: 0.875rem;
color: #1d4ed8; color: var(--blue-700);
border-top: 1px solid #dbeafe; border-top: 1px solid #dbeafe;
} }
/* ── Pulsing live dot ────────────────────────────── */ /* ── Pulsing live dot (keep as-is) ──────────────── */
.sync-live-dot { .sync-live-dot {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@@ -443,7 +471,7 @@ tr.mapping-deleted td {
50% { opacity: 0.4; transform: scale(0.75); } 50% { opacity: 0.4; transform: scale(0.75); }
} }
/* ── Status dot (idle/running/completed/failed) ──── */ /* ── Status dot (keep as-is) ─────────────────────── */
.sync-status-dot { .sync-status-dot {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
@@ -461,32 +489,50 @@ tr.mapping-deleted td {
display: none; display: none;
gap: 0.375rem; gap: 0.375rem;
align-items: center; align-items: center;
font-size: 0.8125rem; font-size: 0.875rem;
} }
.period-custom-range.visible { display: flex; } .period-custom-range.visible { display: flex; }
/* ── Compact button ──────────────────────────────── */ /* ── select-compact (used in filter bars) ─────────── */
.btn-compact {
padding: 0.3rem 0.75rem;
font-size: 0.8125rem;
}
/* ── Compact select ──────────────────────────────── */
.select-compact { .select-compact {
padding: 0.25rem 0.5rem; padding: 0.375rem 0.5rem;
font-size: 0.8125rem; font-size: 0.875rem;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 6px; border-radius: 0.375rem;
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
} }
/* ── btn-compact (kept for backward compat) ──────── */
.btn-compact {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
/* ── Result banner ───────────────────────────────── */ /* ── Result banner ───────────────────────────────── */
.result-banner { .result-banner {
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border-radius: 6px; border-radius: 0.375rem;
font-size: 0.8125rem; font-size: 0.875rem;
background: #d1fae5; background: #d1fae5;
color: #065f46; color: #065f46;
border: 1px solid #6ee7b7; border: 1px solid #6ee7b7;
} }
/* ── Badge-pct (mappings page) ───────────────────── */
.badge-pct {
font-size: 0.7rem;
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-weight: 600;
}
.badge-pct.complete { background: #d1fae5; color: #065f46; }
.badge-pct.incomplete { background: #fef3c7; color: #92400e; }
/* ── Responsive ──────────────────────────────────── */
@media (max-width: 767.98px) {
.sidebar { transform: translateX(-100%); }
.sidebar.show { transform: translateX(0); }
.main-content { margin-left: 0; }
.sidebar-toggle { display: block !important; }
}

8
api/app/static/js/dashboard.js
View File

@@ -279,7 +279,7 @@ async function loadDashOrders() {
const c = data.counts || {}; const c = data.counts || {};
const el = (id) => document.getElementById(id); const el = (id) => document.getElementById(id);
if (el('cntAll')) el('cntAll').textContent = c.total || 0; if (el('cntAll')) el('cntAll').textContent = c.total || 0;
if (el('cntImp')) el('cntImp').textContent = c.imported || 0; if (el('cntImp')) el('cntImp').textContent = c.imported_all || c.imported || 0;
if (el('cntSkip')) el('cntSkip').textContent = c.skipped || 0; if (el('cntSkip')) el('cntSkip').textContent = c.skipped || 0;
if (el('cntErr')) el('cntErr').textContent = c.error || c.errors || 0; if (el('cntErr')) el('cntErr').textContent = c.error || c.errors || 0;
if (el('cntNef')) el('cntNef').textContent = c.uninvoiced || c.nefacturate || 0; if (el('cntNef')) el('cntNef').textContent = c.uninvoiced || c.nefacturate || 0;
@@ -297,7 +297,7 @@ async function loadDashOrders() {
// Invoice info // Invoice info
let invoiceBadge = ''; let invoiceBadge = '';
let invoiceTotal = ''; let invoiceTotal = '';
if (o.status !== 'IMPORTED') { if (o.status !== 'IMPORTED' && o.status !== 'ALREADY_IMPORTED') {
invoiceBadge = '<span class="text-muted">-</span>'; invoiceBadge = '<span class="text-muted">-</span>';
} else if (o.invoice && o.invoice.facturat) { } else if (o.invoice && o.invoice.facturat) {
invoiceBadge = `<span class="badge bg-success">Facturat</span>`; invoiceBadge = `<span class="badge bg-success">Facturat</span>`;
@@ -412,7 +412,7 @@ function orderStatusBadge(status) {
switch ((status || '').toUpperCase()) { switch ((status || '').toUpperCase()) {
case 'IMPORTED': return '<span class="badge bg-success">Importat</span>'; case 'IMPORTED': return '<span class="badge bg-success">Importat</span>';
case 'ALREADY_IMPORTED': return '<span class="badge bg-info">Deja importat</span>'; case 'ALREADY_IMPORTED': return '<span class="badge bg-info">Deja importat</span>';
case 'SKIPPED': return '<span class="badge bg-warning text-dark">Omis</span>'; case 'SKIPPED': return '<span class="badge bg-warning">Omis</span>';
case 'ERROR': return '<span class="badge bg-danger">Eroare</span>'; case 'ERROR': return '<span class="badge bg-danger">Eroare</span>';
default: return `<span class="badge bg-secondary">${esc(status)}</span>`; default: return `<span class="badge bg-secondary">${esc(status)}</span>`;
} }
@@ -484,7 +484,7 @@ async function openDashOrderDetail(orderNumber) {
switch (item.mapping_status) { switch (item.mapping_status) {
case 'mapped': statusBadge = '<span class="badge bg-success">Mapat</span>'; break; case 'mapped': statusBadge = '<span class="badge bg-success">Mapat</span>'; break;
case 'direct': statusBadge = '<span class="badge bg-info">Direct</span>'; break; case 'direct': statusBadge = '<span class="badge bg-info">Direct</span>'; break;
case 'missing': statusBadge = '<span class="badge bg-warning text-dark">Lipsa</span>'; break; case 'missing': statusBadge = '<span class="badge bg-warning">Lipsa</span>'; break;
default: statusBadge = '<span class="badge bg-secondary">?</span>'; default: statusBadge = '<span class="badge bg-secondary">?</span>';
} }

4
api/app/static/js/logs.js
View File

@@ -52,7 +52,7 @@ function orderStatusBadge(status) {
switch ((status || '').toUpperCase()) { switch ((status || '').toUpperCase()) {
case 'IMPORTED': return '<span class="badge bg-success">Importat</span>'; case 'IMPORTED': return '<span class="badge bg-success">Importat</span>';
case 'ALREADY_IMPORTED': return '<span class="badge bg-info">Deja importat</span>'; case 'ALREADY_IMPORTED': return '<span class="badge bg-info">Deja importat</span>';
case 'SKIPPED': return '<span class="badge bg-warning text-dark">Omis</span>'; case 'SKIPPED': return '<span class="badge bg-warning">Omis</span>';
case 'ERROR': return '<span class="badge bg-danger">Eroare</span>'; case 'ERROR': return '<span class="badge bg-danger">Eroare</span>';
default: return `<span class="badge bg-secondary">${esc(status)}</span>`; default: return `<span class="badge bg-secondary">${esc(status)}</span>`;
} }
@@ -345,7 +345,7 @@ async function openOrderDetail(orderNumber) {
switch (item.mapping_status) { switch (item.mapping_status) {
case 'mapped': statusBadge = '<span class="badge bg-success">Mapat</span>'; break; case 'mapped': statusBadge = '<span class="badge bg-success">Mapat</span>'; break;
case 'direct': statusBadge = '<span class="badge bg-info">Direct</span>'; break; case 'direct': statusBadge = '<span class="badge bg-info">Direct</span>'; break;
case 'missing': statusBadge = '<span class="badge bg-warning text-dark">Lipsa</span>'; break; case 'missing': statusBadge = '<span class="badge bg-warning">Lipsa</span>'; break;
default: statusBadge = '<span class="badge bg-secondary">?</span>'; default: statusBadge = '<span class="badge bg-secondary">?</span>';
} }

26
api/app/templates/dashboard.html
View File

@@ -10,28 +10,28 @@
<!-- TOP ROW: Status + Controls --> <!-- TOP ROW: Status + Controls -->
<div class="sync-card-controls"> <div class="sync-card-controls">
<span id="syncStatusDot" class="sync-status-dot idle"></span> <span id="syncStatusDot" class="sync-status-dot idle"></span>
<span id="syncStatusText" style="font-size:0.8125rem;color:#374151;">Inactiv</span> <span id="syncStatusText" class="text-secondary">Inactiv</span>
<div style="display:flex;align-items:center;gap:0.5rem;margin-left:auto;"> <div class="d-flex align-items-center gap-2 ms-auto">
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.8125rem;color:#6b7280;"> <label class="d-flex align-items-center gap-1 text-muted">
Auto: Auto:
<input type="checkbox" id="schedulerToggle" style="cursor:pointer;" onchange="toggleScheduler()"> <input type="checkbox" id="schedulerToggle" class="cursor-pointer" onchange="toggleScheduler()">
</label> </label>
<select id="schedulerInterval" class="select-compact" onchange="updateSchedulerInterval()"> <select id="schedulerInterval" class="select-compact" onchange="updateSchedulerInterval()">
<option value="5">5 min</option> <option value="5">5 min</option>
<option value="10" selected>10 min</option> <option value="10" selected>10 min</option>
<option value="30">30 min</option> <option value="30">30 min</option>
</select> </select>
<button id="syncStartBtn" class="btn btn-primary btn-compact" onclick="startSync()">&#9654; Start Sync</button> <button id="syncStartBtn" class="btn btn-sm btn-primary" onclick="startSync()">&#9654; Start Sync</button>
</div> </div>
</div> </div>
<div class="sync-card-divider"></div> <div class="sync-card-divider"></div>
<!-- BOTTOM ROW: Last sync info (clickable → jurnal) --> <!-- BOTTOM ROW: Last sync info (clickable → jurnal) -->
<div class="sync-card-info" id="lastSyncRow" role="button" tabindex="0" title="Ver jurnal sync"> <div class="sync-card-info" id="lastSyncRow" role="button" tabindex="0" title="Ver jurnal sync">
<span id="lastSyncDate" style="font-weight:500;">&#8212;</span> <span id="lastSyncDate" class="fw-medium">&#8212;</span>
<span id="lastSyncDuration" style="color:#9ca3af;">&#8212;</span> <span id="lastSyncDuration" class="text-muted">&#8212;</span>
<span id="lastSyncCounts">&#8212;</span> <span id="lastSyncCounts">&#8212;</span>
<span id="lastSyncStatus">&#8212;</span> <span id="lastSyncStatus">&#8212;</span>
<span style="margin-left:auto;font-size:0.75rem;color:#9ca3af;">&#8599; jurnal</span> <span class="ms-auto small text-muted">&#8599; jurnal</span>
</div> </div>
<!-- LIVE PROGRESS (shown only when sync is running) --> <!-- LIVE PROGRESS (shown only when sync is running) -->
<div class="sync-card-progress" id="syncProgressArea" style="display:none;"> <div class="sync-card-progress" id="syncProgressArea" style="display:none;">
@@ -64,7 +64,7 @@
</div> </div>
<!-- Status pills --> <!-- Status pills -->
<button class="filter-pill active" data-status="all">Toate <span class="filter-count" id="cntAll">0</span></button> <button class="filter-pill active" data-status="all">Toate <span class="filter-count" id="cntAll">0</span></button>
<button class="filter-pill" data-status="IMPORTED">Imp. <span class="filter-count" id="cntImp">0</span></button> <button class="filter-pill" data-status="IMPORTED">Importat <span class="filter-count" id="cntImp">0</span></button>
<button class="filter-pill" data-status="SKIPPED">Omise <span class="filter-count" id="cntSkip">0</span></button> <button class="filter-pill" data-status="SKIPPED">Omise <span class="filter-count" id="cntSkip">0</span></button>
<button class="filter-pill" data-status="ERROR">Erori <span class="filter-count" id="cntErr">0</span></button> <button class="filter-pill" data-status="ERROR">Erori <span class="filter-count" id="cntErr">0</span></button>
<button class="filter-pill" data-status="UNINVOICED">Nefact. <span class="filter-count" id="cntNef">0</span></button> <button class="filter-pill" data-status="UNINVOICED">Nefact. <span class="filter-count" id="cntNef">0</span></button>
@@ -73,11 +73,11 @@
</div> </div>
</div> </div>
<!-- Pagination top bar --> <!-- Pagination top bar -->
<div class="card-body py-1 px-3 border-bottom d-flex justify-content-between align-items-center" style="gap:0.5rem;"> <div class="card-body py-1 px-3 border-bottom d-flex justify-content-between align-items-center gap-2">
<small class="text-muted" id="dashPageInfoTop"></small> <small class="text-muted" id="dashPageInfoTop"></small>
<div style="display:flex;align-items:center;gap:0.5rem;"> <div class="d-flex align-items-center gap-2">
<label style="font-size:0.8125rem;color:#6b7280;white-space:nowrap;">Per pagina: <label class="text-muted text-nowrap">Per pagina:
<select id="perPageSelect" class="select-compact" style="margin-left:0.25rem;" onchange="dashChangePerPage(this.value)"> <select id="perPageSelect" class="select-compact ms-1" onchange="dashChangePerPage(this.value)">
<option value="25">25</option> <option value="25">25</option>
<option value="50" selected>50</option> <option value="50" selected>50</option>
<option value="100">100</option> <option value="100">100</option>

5
api/app/templates/mappings.html
View File

@@ -3,11 +3,6 @@
{% block nav_mappings %}active{% endblock %} {% block nav_mappings %}active{% endblock %}
{% block content %} {% block content %}
<style>
.badge-pct { font-size: 0.7rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; }
.badge-pct.complete { background: #d1fae5; color: #065f46; }
.badge-pct.incomplete { background: #fef3c7; color: #92400e; }
</style>
<div class="d-flex justify-content-between align-items-center mb-4"> <div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="mb-0">Mapari SKU</h4> <h4 class="mb-0">Mapari SKU</h4>
<div> <div>

6
api/app/templates/missing_skus.html
View File

@@ -24,8 +24,8 @@
Toate <span class="filter-count" id="cntAllSkus">0</span> Toate <span class="filter-count" id="cntAllSkus">0</span>
</button> </button>
<input type="search" id="skuSearch" placeholder="Cauta SKU / produs..." class="search-input"> <input type="search" id="skuSearch" placeholder="Cauta SKU / produs..." class="search-input">
<button id="rescanBtn" class="btn btn-secondary btn-compact" style="margin-left:0.5rem;">&#8635; Re-scan</button> <button id="rescanBtn" class="btn btn-sm btn-secondary ms-2">&#8635; Re-scan</button>
<span id="rescanProgress" style="display:none;align-items:center;gap:0.4rem;font-size:0.8125rem;color:#1d4ed8;"> <span id="rescanProgress" class="align-items-center gap-2 text-primary" style="display:none;">
<span class="sync-live-dot"></span> <span class="sync-live-dot"></span>
<span id="rescanProgressText">Scanare...</span> <span id="rescanProgressText">Scanare...</span>
</span> </span>
@@ -199,7 +199,7 @@ function renderMissingSkusTable(skus, data) {
tbody.innerHTML = skus.map(s => { tbody.innerHTML = skus.map(s => {
const statusBadge = s.resolved const statusBadge = s.resolved
? '<span class="badge bg-success">Rezolvat</span>' ? '<span class="badge bg-success">Rezolvat</span>'
: '<span class="badge bg-warning text-dark">Nerezolvat</span>'; : '<span class="badge bg-warning">Nerezolvat</span>';
let firstCustomer = '-'; let firstCustomer = '-';
try { try {