mcelwain
/
document-processor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: unify shell layout with global header and sidebar

This commit is contained in:
Sean McElwain 2026-04-19 13:26:50 -05:00
parent 28b6157daf
commit 1cb75a439e
15 changed files with 1287 additions and 541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1104
app/static/app.css
View File

File diff suppressed because it is too large Load Diff

38
app/templates/auth/login.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<main class="main" style="max-width:520px; margin:3rem auto; padding:2rem 1rem;">
<div class="card">
<h1 class="page-title">Login</h1>
<p class="page-subtitle">Sign in to Document Processor.</p>
{% if error %}
<div class="error-box">{{ error }}</div>
{% endif %}
<form method="post" action="/login">
<div class="form-grid">
<div class="form-field full">
<label for="username">Username or email</label>
<input id="username" type="text" name="username" required>
</div>
<div class="form-field full">
<label for="password">Password</label>
<input id="password" type="password" name="password" required>
</div>
</div>
<div class="button-row" style="margin-top:1rem;">
<button class="primary" type="submit">Login</button>
</div>
</form>
</div>
</main>
</body>
</html>

38
app/templates/base.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Document Processor{% endblock %}</title>
<link rel="stylesheet" href="/static/app.css?v=12">
</head>
<body>
<div class="app-shell">
{% include "partials/sidebar.html" %}
{% include "partials/header.html" %}
<main class="main">
<div class="main-content">
{% block content %}{% endblock %}
</div>
</main>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const menuToggle = document.getElementById("menu-toggle");
const appShell = document.querySelector(".app-shell");
if (!menuToggle || !appShell) return;
const toggleNav = () => appShell.classList.toggle("nav-open");
menuToggle.addEventListener("click", toggleNav);
menuToggle.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleNav();
}
});
});
</script>
</body>
</html>

166
app/templates/dashboard.html
View File

@ -1,55 +1,10 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="/static/app.css">
<style>
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.stat-card { {% block title %}Dashboard{% endblock %}
border: 1px solid #d7dce5;
border-radius: 14px;
padding: 0.85rem 1rem;
background: #f8fafc;
}
.stat-label { {% block content %}
font-size: 0.78rem;
color: #6b7280;
margin-bottom: 0.35rem;
}
.stat-value { <div class="page-header">
font-size: 1.35rem;
font-weight: 700;
color: #111827;
line-height: 1.1;
}
.compact-button-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 900px) {
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main">
<div class="topbar">
<div> <div>
<h1 class="page-title">Dashboard</h1> <h1 class="page-title">Dashboard</h1>
<p class="page-subtitle">Overview of document processing, extraction coverage, and line item review status.</p> <p class="page-subtitle">Overview of document processing, extraction coverage, and line item review status.</p>
@ -57,71 +12,36 @@
</div> </div>
<div class="card"> <div class="card">
<div class="compact-button-row"> <div class="button-row">
<a class="button-link primary" href="/documents/">Open documents</a> <a class="button-link primary" href="/documents/">Open documents</a>
<a class="button-link" href="/queue/">Open queue</a> <a class="button-link" href="/queue/">Open queue</a>
<a class="button-link" href="/line-items/">Open line items</a> <a class="button-link" href="/line-items/">Open line items</a>
<a class="button-link" href="/line-items/summary">Open summary</a>
<a class="button-link" href="/ingest/">Open ingest</a> <a class="button-link" href="/ingest/">Open ingest</a>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h2 class="card-title">Document overview</h2> <h2 class="card-title">Document overview</h2>
<div class="stats-grid"> <div class="meta-grid">
<div class="stat-card"> <div class="meta-item"><span class="meta-label">Total documents</span>{{ total_documents }}</div>
<div class="stat-label">Total documents</div> <div class="meta-item"><span class="meta-label">Active documents</span>{{ active_documents }}</div>
<div class="stat-value">{{ total_documents }}</div> <div class="meta-item"><span class="meta-label">Reviewed documents</span>{{ reviewed_documents }}</div>
</div> <div class="meta-item"><span class="meta-label">Pending OCR/review</span>{{ pending_review_documents }}</div>
<div class="stat-card"> <div class="meta-item"><span class="meta-label">Extracted field rows</span>{{ extracted_documents }}</div>
<div class="stat-label">Active documents</div> <div class="meta-item"><span class="meta-label">Trashed documents</span>{{ trashed_documents }}</div>
<div class="stat-value">{{ active_documents }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Reviewed documents</div>
<div class="stat-value">{{ reviewed_documents }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Pending OCR/review</div>
<div class="stat-value">{{ pending_review_documents }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Extracted field rows</div>
<div class="stat-value">{{ extracted_documents }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Trashed documents</div>
<div class="stat-value">{{ trashed_documents }}</div>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h2 class="card-title">Line item overview</h2> <h2 class="card-title">Line item overview</h2>
<div class="stats-grid"> <div class="meta-grid">
<div class="stat-card"> <div class="meta-item"><span class="meta-label">Total line items</span>{{ total_line_items }}</div>
<div class="stat-label">Total line items</div> <div class="meta-item"><span class="meta-label">Cocktail items</span>{{ cocktail_count }}</div>
<div class="stat-value">{{ total_line_items }}</div> <div class="meta-item"><span class="meta-label">Rated cocktails</span>{{ rated_cocktails }}</div>
</div> <div class="meta-item"><span class="meta-label">Pending cocktail ratings</span>{{ pending_cocktail_reviews }}</div>
<div class="stat-card"> <div class="meta-item"><span class="meta-label">Cocktails marked N/A</span>{{ na_cocktails }}</div>
<div class="stat-label">Cocktail items</div> <div class="meta-item"><span class="meta-label">Average cocktail rating</span>{{ avg_cocktail_rating or "—" }}</div>
<div class="stat-value">{{ cocktail_count }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Rated cocktails</div>
<div class="stat-value">{{ rated_cocktails }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Pending cocktail ratings</div>
<div class="stat-value">{{ pending_cocktail_reviews }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Cocktails marked N/A</div>
<div class="stat-value">{{ na_cocktails }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Average cocktail rating</div>
<div class="stat-value">{{ avg_cocktail_rating or "—" }}</div>
</div>
</div> </div>
</div> </div>
@ -134,7 +54,7 @@
<tr> <tr>
<th>Document</th> <th>Document</th>
<th>Type</th> <th>Type</th>
<th>Review Status</th> <th>Review status</th>
<th>Updated</th> <th>Updated</th>
</tr> </tr>
</thead> </thead>
@ -143,11 +63,7 @@
<tr> <tr>
<td><a href="/documents/{{ doc.document_id }}">{{ doc.document_id }}</a></td> <td><a href="/documents/{{ doc.document_id }}">{{ doc.document_id }}</a></td>
<td>{{ doc.document_type }}</td> <td>{{ doc.document_type }}</td>
<td> <td><span class="badge {% if doc.review_status == 'reviewed' %}reviewed{% else %}pending{% endif %}">{{ doc.review_status }}</span></td>
<span class="badge {% if doc.review_status == 'reviewed' %}reviewed{% else %}pending{% endif %}">
{{ doc.review_status }}
</span>
</td>
<td>{{ doc.updated_at }}</td> <td>{{ doc.updated_at }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
@ -155,7 +71,7 @@
</table> </table>
</div> </div>
{% else %} {% else %}
<p class="empty-state">No recent documents found.</p> <p class="empty-state">No documents found.</p>
{% endif %} {% endif %}
</div> </div>
@ -172,6 +88,7 @@
<th>Category</th> <th>Category</th>
<th>Total</th> <th>Total</th>
<th>Rating</th> <th>Rating</th>
<th>Status</th>
<th>Document</th> <th>Document</th>
</tr> </tr>
</thead> </thead>
@ -183,15 +100,8 @@
<td>{{ row.description }}</td> <td>{{ row.description }}</td>
<td>{{ row.category }}</td> <td>{{ row.category }}</td>
<td>{{ row.line_total }}</td> <td>{{ row.line_total }}</td>
<td> <td>{{ row.quality_rating }}</td>
{% if row.quality_rating %} <td>{{ row.quality_status }}</td>
{{ row.quality_rating }}
{% elif row.quality_status == "na" %}
N/A
{% else %}
—
{% endif %}
</td>
<td><a href="/documents/{{ row.document_id }}?tab=extracted-fields">{{ row.document_id }}</a></td> <td><a href="/documents/{{ row.document_id }}?tab=extracted-fields">{{ row.document_id }}</a></td>
</tr> </tr>
{% endfor %} {% endfor %}
@ -199,28 +109,8 @@
</table> </table>
</div> </div>
{% else %} {% else %}
<p class="empty-state">No recent line items found.</p> <p class="empty-state">No line items found.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
})();
</script>
</body>
</html>

65
app/templates/documents/list.html
View File

@ -1,22 +1,12 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Documents{% endblock %}
<head>
<meta charset="UTF-8">
<title>Documents</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Documents</h1> <h1 class="page-title">Documents</h1>
<p class="page-subtitle">Browse all documents or refine with advanced search.</p> <p class="page-subtitle">Browse all documents or refine with advanced search.</p>
</div> </div>
</div> <div class="button-row" style="margin:0.75rem 0;">
<div style="display:flex; gap:0.6rem; flex-wrap:wrap; margin:0.75rem 0;">
<a class="button-link" href="/documents/export/training.jsonl">Export document training</a> <a class="button-link" href="/documents/export/training.jsonl">Export document training</a>
<a class="button-link" href="/documents/export/training.jsonl?type=line_items">Export line item training</a> <a class="button-link" href="/documents/export/training.jsonl?type=line_items">Export line item training</a>
</div> </div>
@ -119,48 +109,5 @@
<p class="empty-state">No documents matched the current search.</p> <p class="empty-state">No documents matched the current search.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
const tabButtons = document.querySelectorAll("[data-tab]");
const tabPanels = document.querySelectorAll("[data-panel]");
function activateTab(target) {
tabButtons.forEach(function (b) {
b.classList.toggle("active", b.getAttribute("data-tab") === target);
});
tabPanels.forEach(function (p) {
p.classList.toggle("active", p.getAttribute("data-panel") === target);
});
}
tabButtons.forEach(function (btn) {
btn.addEventListener("click", function () {
const target = btn.getAttribute("data-tab");
activateTab(target);
const url = new URL(window.location.href);
url.searchParams.set("tab", target);
window.history.replaceState({}, "", url.toString());
});
});
})();
</script>
</body>
</html>

39
app/templates/ingest/index.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Ingest{% endblock %}
<head>
<meta charset="UTF-8">
<title>Ingest</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Ingest</h1> <h1 class="page-title">Ingest</h1>
<p class="page-subtitle">Upload files, ingest from server-side paths, or use the current default ingest root.</p> <p class="page-subtitle">Upload files, ingest from server-side paths, or use the current default ingest root.</p>
</div> </div>
</div>
<div class="card"> <div class="card">
<h2 class="card-title">Default ingest root</h2> <h2 class="card-title">Default ingest root</h2>
@ -158,24 +148,5 @@
</div> </div>
</form> </form>
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (!appShell || !menuToggle) return;
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
})();
</script>
</body>
</html>

54
app/templates/ingest/result.html
View File

@ -1,36 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Ingest Result{% endblock %}
<head>
<meta charset="UTF-8">
<title>Ingest Result</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
<aside class="sidebar">
<div class="sidebar-top">
<div class="sidebar-toggle" id="menu-toggle" aria-label="Toggle navigation" role="button" tabindex="0">
<span></span><span></span><span></span>
</div>
<div class="brand">Document Processor</div>
</div>
<div class="sidebar-section-title">Workspace</div> {% block content %}
<nav class="nav-list"> <div class="page-header">
<a class="nav-link" href="/documents/" title="Documents"><span class="nav-link-short">D</span><span class="nav-link-text">Documents</span></a>
<a class="nav-link" href="/queue/" title="Review Queue"><span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span></a>
<a class="nav-link" href="/trash/" title="Trash"><span class="nav-link-short">T</span><span class="nav-link-text">Trash</span></a>
<a class="nav-link active" href="/ingest/" title="Ingest"><span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span></a>
</nav>
</aside>
<main class="main">
<div class="topbar">
<div>
<h1 class="page-title">Ingest Result</h1> <h1 class="page-title">Ingest Result</h1>
<p class="page-subtitle">{{ message }}</p> <p class="page-subtitle">{{ message }}</p>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="button-row"> <div class="button-row">
@ -75,24 +50,5 @@
</ul> </ul>
</div> </div>
{% endif %} {% endif %}
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (!appShell || !menuToggle) return;
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
})();
</script>
</body>
</html>

78
app/templates/line_items/list.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Line Items{% endblock %}
<head>
<meta charset="UTF-8">
<title>Line Items</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Line Items</h1> <h1 class="page-title">Line Items</h1>
<p class="page-subtitle">Analyze extracted purchase lines, prices, and ratings</p> <p class="page-subtitle">Analyze extracted purchase lines, prices, and ratings</p>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="right-pane-tabs"> <div class="right-pane-tabs">
@ -284,63 +274,5 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
const tabButtons = document.querySelectorAll("[data-tab]");
const tabPanels = document.querySelectorAll("[data-panel]");
function toggleReviewNA(el) {
const form = el.closest("form");
if (!form) return;
const disabled = el.checked;
form.querySelectorAll('input[type="text"], textarea').forEach(function (field) {
if (field.name === "quality_rating" || field.name === "quality_note") {
field.disabled = disabled;
}
});
}
document.querySelectorAll('input[name="is_na"]').forEach(function (el) {
if (el.checked) toggleReviewNA(el);
});
function activateTab(target) {
tabButtons.forEach(function (b) {
b.classList.toggle("active", b.getAttribute("data-tab") === target);
});
tabPanels.forEach(function (p) {
p.classList.toggle("active", p.getAttribute("data-panel") === target);
});
}
tabButtons.forEach(function (btn) {
btn.addEventListener("click", function () {
const target = btn.getAttribute("data-tab");
activateTab(target);
const url = new URL(window.location.href);
url.searchParams.set("tab", target);
window.history.replaceState({}, "", url.toString());
});
});
})();
</script>
</body>
</html>

40
app/templates/line_items/queue.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Quality Review Queue{% endblock %}
<head>
<meta charset="UTF-8">
<title>Quality Review Queue</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Quality Review Queue</h1> <h1 class="page-title">Quality Review Queue</h1>
<p class="page-subtitle">Cocktails waiting for a rating or an N/A mark</p> <p class="page-subtitle">Cocktails waiting for a rating or an N/A mark</p>
</div> </div>
</div>
<div class="card"> <div class="card">
{% if next_row %} {% if next_row %}
@ -77,25 +67,5 @@
<p class="empty-state">Nothing is waiting in the quality review queue.</p> <p class="empty-state">Nothing is waiting in the quality review queue.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
})();
</script>
</body>
</html>

40
app/templates/line_items/summary.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Line Item Summary{% endblock %}
<head>
<meta charset="UTF-8">
<title>Line Item Summary</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Line Item Summary</h1> <h1 class="page-title">Line Item Summary</h1>
<p class="page-subtitle">Aggregate prices and ratings across extracted line items</p> <p class="page-subtitle">Aggregate prices and ratings across extracted line items</p>
</div> </div>
</div>
<div class="card"> <div class="card">
<form method="get" action="/line-items/summary"> <form method="get" action="/line-items/summary">
@ -69,25 +59,5 @@
<p class="empty-state">No summary rows found for the current search.</p> <p class="empty-state">No summary rows found for the current search.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
})();
</script>
</body>
</html>

21
app/templates/partials/header.html Normal file
View File

@ -0,0 +1,21 @@
{% set user = request.state.current_user if request is defined and request.state.current_user is defined else None %}
<header class="global-topbar">
<div class="global-topbar-left"></div>
<div class="global-topbar-right">
{% if user %}
<div class="global-topbar-user">
<div class="global-topbar-name">{{ user.display_name }}</div>
<div class="global-topbar-username">@{{ user.username }}</div>
</div>
{% if user.is_admin %}
<span class="badge reviewed">admin</span>
{% endif %}
<form method="post" action="/logout" style="margin:0;">
<button type="submit" class="global-topbar-logout">Logout</button>
</form>
{% endif %}
</div>
</header>

25
app/templates/partials/sidebar.html
View File

@ -4,15 +4,28 @@
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
<div class="brand">Document Processor</div> <div class="brand">Document Processor</div>
</div> </div>
<div class="sidebar-section-title">Workspace</div> <div class="sidebar-section-title">Workspace</div>
<nav class="nav-list"> <nav class="nav-list">
<a class="nav-link {% if active_page == 'dashboard' %}active{% endif %}" href="/" title="Dashboard"><span class="nav-link-short">H</span><span class="nav-link-text">Dashboard</span></a> <a class="nav-link {% if active_page == 'dashboard' %}active{% endif %}" href="/" title="Dashboard">
<a class="nav-link {% if active_page == 'documents' %}active{% endif %}" href="/documents/" title="Documents"><span class="nav-link-short">D</span><span class="nav-link-text">Documents</span></a> <span class="nav-link-short">H</span><span class="nav-link-text">Dashboard</span>
<a class="nav-link {% if active_page == 'line_items' %}active{% endif %}" href="/line-items/" title="Line Items"><span class="nav-link-short">L</span><span class="nav-link-text">Line Items</span></a> </a>
<a class="nav-link {% if active_page == 'queue' %}active{% endif %}" href="/queue/" title="Review Queue"><span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span></a> <a class="nav-link {% if active_page == 'documents' %}active{% endif %}" href="/documents/" title="Documents">
<a class="nav-link {% if active_page == 'trash' %}active{% endif %}" href="/trash/" title="Trash"><span class="nav-link-short">T</span><span class="nav-link-text">Trash</span></a> <span class="nav-link-short">D</span><span class="nav-link-text">Documents</span>
<a class="nav-link {% if active_page == 'ingest' %}active{% endif %}" href="/ingest/" title="Ingest"><span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span></a> </a>
<a class="nav-link {% if active_page == 'line_items' %}active{% endif %}" href="/line-items/" title="Line Items">
<span class="nav-link-short">L</span><span class="nav-link-text">Line Items</span>
</a>
<a class="nav-link {% if active_page == 'queue' %}active{% endif %}" href="/queue/" title="Review Queue">
<span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span>
</a>
<a class="nav-link {% if active_page == 'trash' %}active{% endif %}" href="/trash/" title="Trash">
<span class="nav-link-short">T</span><span class="nav-link-text">Trash</span>
</a>
<a class="nav-link {% if active_page == 'ingest' %}active{% endif %}" href="/ingest/" title="Ingest">
<span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span>
</a>
</nav> </nav>
</aside> </aside>

40
app/templates/presets/index.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Presets{% endblock %}
<head>
<meta charset="UTF-8">
<title>Presets</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Presets</h1> <h1 class="page-title">Presets</h1>
<p class="page-subtitle">Create reusable defaults for additional fields.</p> <p class="page-subtitle">Create reusable defaults for additional fields.</p>
</div> </div>
</div>
<div class="card"> <div class="card">
<h2 class="card-title">{% if editing %}Edit preset{% else %}Create preset{% endif %}</h2> <h2 class="card-title">{% if editing %}Edit preset{% else %}Create preset{% endif %}</h2>
@ -125,25 +115,5 @@
<p class="empty-state">No presets yet.</p> <p class="empty-state">No presets yet.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
})();
</script>
</body>
</html>

39
app/templates/queue/index.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Review Queue{% endblock %}
<head>
<meta charset="UTF-8">
<title>Review Queue</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Review Queue</h1> <h1 class="page-title">Review Queue</h1>
<p class="page-subtitle">Work through OCR review, field extraction, quality review, and recent activity.</p> <p class="page-subtitle">Work through OCR review, field extraction, quality review, and recent activity.</p>
</div> </div>
</div>
@ -151,24 +141,5 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (!appShell || !menuToggle) return;
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
})();
</script>
</body>
</html>

39
app/templates/trash/index.html
View File

@ -1,21 +1,11 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en"> {% block title %}Trash{% endblock %}
<head>
<meta charset="UTF-8">
<title>Trash</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main"> {% block content %}
<div class="topbar"> <div class="page-header">
<div>
<h1 class="page-title">Trash</h1> <h1 class="page-title">Trash</h1>
<p class="page-subtitle">Soft-deleted documents can be restored or removed permanently.</p> <p class="page-subtitle">Soft-deleted documents can be restored or removed permanently.</p>
</div> </div>
</div>
<div class="card"> <div class="card">
{% if documents %} {% if documents %}
@ -58,24 +48,5 @@
<p class="empty-state">Trash is empty.</p> <p class="empty-state">Trash is empty.</p>
{% endif %} {% endif %}
</div> </div>
</main>
</div>
<script> {% endblock %}
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (!appShell || !menuToggle) return;
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
})();
</script>
</body>
</html>