234 lines
7.4 KiB
Plaintext
234 lines
7.4 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Rechnungsübersicht</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<link rel="stylesheet" href="/css/bootstrap.min.css" />
|
||
<link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />
|
||
</head>
|
||
|
||
<body class="bg-light">
|
||
<!-- =========================
|
||
NAVBAR
|
||
========================== -->
|
||
<nav class="navbar navbar-dark bg-dark position-relative px-3">
|
||
<div
|
||
class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2 text-white"
|
||
>
|
||
<i class="bi bi-calculator fs-4"></i>
|
||
<span class="fw-semibold fs-5">Rechnungsübersicht</span>
|
||
</div>
|
||
|
||
<!-- 🔵 RECHTS: DASHBOARD -->
|
||
<div class="ms-auto">
|
||
<a href="/dashboard" class="btn btn-outline-primary btn-sm">
|
||
⬅️ Dashboard
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- =========================
|
||
FILTER: JAHR VON / BIS
|
||
========================== -->
|
||
<div class="container-fluid mt-4">
|
||
<form method="get" class="row g-2 mb-4">
|
||
<div class="col-auto">
|
||
<input
|
||
type="number"
|
||
name="fromYear"
|
||
class="form-control"
|
||
placeholder="Von Jahr"
|
||
value="<%= fromYear %>"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-auto">
|
||
<input
|
||
type="number"
|
||
name="toYear"
|
||
class="form-control"
|
||
placeholder="Bis Jahr"
|
||
value="<%= toYear %>"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-auto">
|
||
<button class="btn btn-outline-secondary">Filtern</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- =========================
|
||
GRID – 4 SPALTEN
|
||
========================== -->
|
||
<div class="row g-3">
|
||
<!-- =========================
|
||
JAHRESUMSATZ
|
||
========================== -->
|
||
<div class="col-xl-3 col-lg-6">
|
||
<div class="card h-100">
|
||
<div class="card-header fw-semibold">Jahresumsatz</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-striped mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>Jahr</th>
|
||
<th class="text-end">€</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% if (yearly.length === 0) { %>
|
||
<tr>
|
||
<td colspan="2" class="text-center text-muted">
|
||
Keine Daten
|
||
</td>
|
||
</tr>
|
||
<% } %> <% yearly.forEach(y => { %>
|
||
<tr>
|
||
<td><%= y.year %></td>
|
||
<td class="text-end fw-semibold">
|
||
<%= Number(y.total).toFixed(2) %>
|
||
</td>
|
||
</tr>
|
||
<% }) %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =========================
|
||
QUARTALSUMSATZ
|
||
========================== -->
|
||
<div class="col-xl-3 col-lg-6">
|
||
<div class="card h-100">
|
||
<div class="card-header fw-semibold">Quartalsumsatz</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-striped mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>Jahr</th>
|
||
<th>Q</th>
|
||
<th class="text-end">€</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% if (quarterly.length === 0) { %>
|
||
<tr>
|
||
<td colspan="3" class="text-center text-muted">
|
||
Keine Daten
|
||
</td>
|
||
</tr>
|
||
<% } %> <% quarterly.forEach(q => { %>
|
||
<tr>
|
||
<td><%= q.year %></td>
|
||
<td>Q<%= q.quarter %></td>
|
||
<td class="text-end fw-semibold">
|
||
<%= Number(q.total).toFixed(2) %>
|
||
</td>
|
||
</tr>
|
||
<% }) %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =========================
|
||
MONATSUMSATZ
|
||
========================== -->
|
||
<div class="col-xl-3 col-lg-6">
|
||
<div class="card h-100">
|
||
<div class="card-header fw-semibold">Monatsumsatz</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-striped mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>Monat</th>
|
||
<th class="text-end">€</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% if (monthly.length === 0) { %>
|
||
<tr>
|
||
<td colspan="2" class="text-center text-muted">
|
||
Keine Daten
|
||
</td>
|
||
</tr>
|
||
<% } %> <% monthly.forEach(m => { %>
|
||
<tr>
|
||
<td><%= m.month %></td>
|
||
<td class="text-end fw-semibold">
|
||
<%= Number(m.total).toFixed(2) %>
|
||
</td>
|
||
</tr>
|
||
<% }) %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =========================
|
||
UMSATZ PRO PATIENT
|
||
========================== -->
|
||
<div class="col-xl-3 col-lg-6">
|
||
<div class="card h-100">
|
||
<div class="card-header fw-semibold">Umsatz pro Patient</div>
|
||
<div class="card-body p-2">
|
||
<!-- 🔍 Suche -->
|
||
<form method="get" class="mb-2 d-flex gap-2">
|
||
<input type="hidden" name="fromYear" value="<%= fromYear %>" />
|
||
<input type="hidden" name="toYear" value="<%= toYear %>" />
|
||
|
||
<input
|
||
type="text"
|
||
name="q"
|
||
value="<%= search %>"
|
||
class="form-control form-control-sm"
|
||
placeholder="Patient suchen..."
|
||
/>
|
||
|
||
<button class="btn btn-sm btn-outline-primary">Suchen</button>
|
||
|
||
<a
|
||
href="/admin/invoices?fromYear=<%= fromYear %>&toYear=<%= toYear %>"
|
||
class="btn btn-sm btn-outline-secondary"
|
||
>
|
||
Reset
|
||
</a>
|
||
</form>
|
||
|
||
<table class="table table-sm table-striped mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>Patient</th>
|
||
<th class="text-end">€</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% if (patients.length === 0) { %>
|
||
<tr>
|
||
<td colspan="2" class="text-center text-muted">
|
||
Keine Daten
|
||
</td>
|
||
</tr>
|
||
<% } %> <% patients.forEach(p => { %>
|
||
<tr>
|
||
<td><%= p.patient %></td>
|
||
<td class="text-end fw-semibold">
|
||
<%= Number(p.total).toFixed(2) %>
|
||
</td>
|
||
</tr>
|
||
<% }) %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|