Kompakte Ansicht finalisiert

main.go

@@ -143,6 +143,9 @@ type Monatsstatistik struct {
 	Monat        string  // z. B. "07.2025"
 	Summe        float64 // bezahlte
 	SummeOffen   float64 // noch nicht bezahlt
+	Prozent      float64
+	ProzentOffen float64
+	Eintraege    []Entry
 }
 
 var tmpl = template.Must(template.New("form").Funcs(template.FuncMap{
@@ -437,11 +440,14 @@ func main() {
 			if _, ok := monatsMap[monatKey]; !ok {
 				monatsMap[monatKey] = &Monatsstatistik{Monat: monatKey}
 			}
+			monatsMap[monatKey].Eintraege = append(monatsMap[monatKey].Eintraege, e)
 			if e.Bezahlt {
 				monatsMap[monatKey].Summe += e.Abgabe
 			} else {
 				monatsMap[monatKey].SummeOffen += e.Abgabe
 			}
+			monatsMap[monatKey].Prozent = monatsMap[monatKey].Summe / (monatsMap[monatKey].Summe + monatsMap[monatKey].SummeOffen) * 100
+			monatsMap[monatKey].ProzentOffen = monatsMap[monatKey].SummeOffen / (monatsMap[monatKey].Summe + monatsMap[monatKey].SummeOffen) * 100
 		}
 
 		var monatsStat []Monatsstatistik
@@ -628,7 +634,7 @@ const htmlTemplate = `
 				<div class="col">
 					<label class="form-label">Prozentwert</label>
 					<select name="prozentwert" class="form-select">
-						<option value="30">30%</option>
+						<option value="30">30% (Standard)</option>
 						<option value="10">10%</option>
 						<option value="15">15%</option>
 						<option value="20">20%</option>
@@ -684,10 +690,68 @@ const htmlTemplate = `
 			</div>
 			<button type="submit" class="btn btn-primary">Berechnen & Speichern</button>
 		</form>
+		<hr />
 		{{end}}
 
+		<h2 class="mb-3">Auswertungen</h2>
 
-		<h2 class="mb-3">Gespeicherte Einträge</h2>
+		<ul class="nav nav-tabs" id="auswertungTabs" role="tablist">
+			<li class="nav-item" role="presentation">
+				<button class="nav-link active" id="monat-tab" data-bs-toggle="tab" data-bs-target="#monat" type="button" role="tab" aria-controls="monat" aria-selected="true">
+					Monatliche Übersicht
+				</button>
+			</li>
+			<li class="nav-item" role="presentation">
+				<button class="nav-link" id="abteilung-tab" data-bs-toggle="tab" data-bs-target="#abteilung" type="button" role="tab" aria-controls="abteilung" aria-selected="false">
+					Verteilung auf Abteilungen
+				</button>
+			</li>
+			<li class="nav-item" role="presentation">
+				<button class="nav-link" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab" aria-controls="items" aria-selected="false">
+					Gegenwert in Items
+				</button>
+			</li>
+		</ul>
+
+		<div class="tab-content border border-top-0 p-4 bg-white" id="auswertungTabsContent">
+
+			<!-- Monatliche Übersicht -->
+			<div class="tab-pane fade show active" id="monat" role="tabpanel" aria-labelledby="monat-tab">
+				<h5 class="mb-3">Monatliche Übersicht</h5>
+				<table class="table table-bordered">
+					<thead>
+						<tr>
+							<th>Monat</th>
+							<th>Abgaben verteilt</th>
+							<th>Abgaben offen</th>
+							<th>Statistik</th>
+							<th>Aktionen</th>
+						</tr>
+					</thead>
+					<tbody>
+						{{range .Monatsstatistik}}
+						<tr>
+							<td>{{.Monat}}</td>
+							<td>{{formatNumber .Summe}} UEC</td>
+							<td>{{formatNumber .SummeOffen}} UEC</td>
+							<td>
+								<div class="progress">
+									<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: {{.Prozent}}%" aria-valuenow="{{.Prozent}}" aria-valuemin="0" aria-valuemax="100"></div>
+									<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: {{.ProzentOffen}}%" aria-valuenow="{{.ProzentOffen}}" aria-valuemin="0" aria-valuemax="100"></div>
+								</div>
+							</td>
+							<td>
+								<button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#monat-{{.Monat}}" aria-expanded="false" aria-controls="monat-{{.Monat}}">
+									Details
+								</button>
+							</td>
+						</tr>
+
+						<tr>
+							<td colspan="9" class="p-0 border-0">
+								<div class="collapse" id="monat-{{.Monat}}">
+									<div class="bg-light p-3 border-top">
+										<strong>Interne Infos (Details):</strong>
 										<table class="table table-striped table-bordered">
 											<thead>
 												<tr>
@@ -699,11 +763,11 @@ const htmlTemplate = `
 													<th>Prozent</th>
 													<th>UEC Abgabe</th>
 													<th>Status</th>
-					{{if .LoggedIn}}<th>Aktion</th>{{else}}<th>Erweitert</th>{{end}}
+													{{if $.LoggedIn}}<th>Aktion</th>{{else}}<th>Erweitert</th>{{end}}
 												</tr>
 											</thead>
 											<tbody id="eintragsTabelle">
-				{{range .Entries}}
+												{{range .Eintraege}}
 												<tr>
 													<td>{{.ID}}</td>
 													<td>{{formatDate .CreatedAt}}</td>
@@ -723,7 +787,7 @@ const htmlTemplate = `
 															{{if $.LoggedIn}}
 															<a href="/markaspaid?id={{.ID}}" class="btn btn-sm btn-outline-success">✓ abgeben</a>
 															{{else}}
-							<span class="badge bg-secondary">✗ Offen</span>
+															<span class="badge bg-danger">✗ Offen</span>
 															{{end}}
 														{{end}}
 													</td>
@@ -768,48 +832,9 @@ const htmlTemplate = `
 												{{end}}
 											</tbody>
 										</table>
-
+									</div>
-		<hr />
+								</div>
-
+							</td>
-		<h2 class="mb-3">Auswertungen</h2>
-
-		<ul class="nav nav-tabs" id="auswertungTabs" role="tablist">
-			<li class="nav-item" role="presentation">
-				<button class="nav-link active" id="monat-tab" data-bs-toggle="tab" data-bs-target="#monat" type="button" role="tab" aria-controls="monat" aria-selected="true">
-					Monatliche Übersicht
-				</button>
-			</li>
-			<li class="nav-item" role="presentation">
-				<button class="nav-link" id="abteilung-tab" data-bs-toggle="tab" data-bs-target="#abteilung" type="button" role="tab" aria-controls="abteilung" aria-selected="false">
-					Verteilung auf Abteilungen
-				</button>
-			</li>
-			<li class="nav-item" role="presentation">
-				<button class="nav-link" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab" aria-controls="items" aria-selected="false">
-					Gegenwert in Items
-				</button>
-			</li>
-		</ul>
-
-		<div class="tab-content border border-top-0 p-4 bg-white" id="auswertungTabsContent">
-
-			<!-- Monatliche Übersicht -->
-			<div class="tab-pane fade show active" id="monat" role="tabpanel" aria-labelledby="monat-tab">
-				<h5 class="mb-3">Monatliche Übersicht</h5>
-				<table class="table table-bordered">
-					<thead>
-						<tr>
-							<th>Monat</th>
-							<th>Abgaben verteilt</th>
-							<th>Abgaben offen</th>
-						</tr>
-					</thead>
-					<tbody>
-						{{range .Monatsstatistik}}
-						<tr>
-							<td>{{.Monat}}</td>
-							<td>{{formatNumber .Summe}} UEC</td>
-							<td>{{formatNumber .SummeOffen}} UEC</td>
 						</tr>
 						{{end}}
 					</tbody>