Abrechnungsübersicht

2025-07-30 12:26:28 -05:00
parent f9dc9ebd48
commit 10b1aec389
9 changed files with 462 additions and 417 deletions
--- a/src/components/Abrechnung/AbrechnungTable.svelte
+++ b/src/components/Abrechnung/AbrechnungTable.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { Aufnahme, BedarfsausweisWohnen, Enums, Objekt, Rechnung, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/server/prisma.js";
+	import moment from "moment";
+	import { DatePicker } from "@svelte-plugins/datepicker"
+	export let bestellungen: (Rechnung & {
+		ausweis: (VerbrauchsausweisWohnen | BedarfsausweisWohnen | VerbrauchsausweisGewerbe) & { aufnahme: Aufnahme & { objekt: Objekt }}
+	})[];
+	export let provisionen: Record<Enums.Ausweisart, number>;
+	export let partnerCodeErstesMal: Date;
+	export let email: string;
+
+	const bestellungenNachMonat: Record<string, (typeof bestellungen)> = {};
+	for (const bestellung of bestellungen) {
+		const monat = moment(bestellung.created_at).format("Y-MM");
+		if (monat in bestellungenNachMonat) {
+			bestellungenNachMonat[monat].push(bestellung)
+		} else {
+			bestellungenNachMonat[monat] = [bestellung]
+		}
+	}
+
+	// Wir brauchen alle Monate zwischen dem ersten Mal, dass der partner_code benutzt wurde bis zum heutigen Zeitpunkt.
+	const months: Record<string, string> = {
+		"01": "Januar", "02": "Februar", "03": "März", "04": "April",
+		"05": "Mai", "06": "Juni", "07": "Juli", "08": "August",
+		"09": "September", "10": "Oktober", "11": "November", "12": "Dezember"
+	};
+
+	function getMonthlyPeriods(minTime?: Date): moment.Moment[] {
+		const min = minTime ? moment(minTime) : moment();
+		const start = min.clone().startOf('month');
+
+		const end = moment().add(1, 'month').startOf('month');
+
+		const monthsArray: moment.Moment[] = [];
+		const current = start.clone();
+
+		while (current.isBefore(end)) {
+			monthsArray.push(current.clone());
+			current.add(1, 'month');
+		}
+
+		return monthsArray.reverse(); // Most recent month first
+	}
+
+	const periods = getMonthlyPeriods(partnerCodeErstesMal)	
+
+
+	let isOpen = false;
+	export let startDate = moment(partnerCodeErstesMal).startOf('month').toDate();
+	export let endDate = moment().endOf('month').toDate();
+	$: formattedStartDate = moment(startDate).format("DD.MM.YYYY");
+	$: formattedEndDate = moment(endDate).format("DD.MM.YYYY");
+	function toggleDatePicker() {
+		isOpen = !isOpen;
+	}
+
+	const onChange = ({ startDate, endDate }: { startDate: number, endDate: number }) => {
+		window.location.href = `/dashboard/abrechnung?start=${moment(startDate).format("YYYY-MM-DD")}&end=${moment(endDate).format("YYYY-MM-DD")}`;
+	};
+</script>
+
+<div class="fixed top-0 left-0 right-0 bg-white p-4 shadow z-10">
+	<div class="flex justify-between items-center">
+		<DatePicker bind:isOpen bind:startDate bind:endDate isRange={true} onDateChange={onChange} isMultipane={true}>
+			<input type="text" class="w-min" readonly value={`${formattedStartDate} - ${formattedEndDate}`} on:click={toggleDatePicker} />
+		</DatePicker>
+		<p>Abrechnungsübersicht für <strong>{email}</strong></p>
+	</div>
+</div>
+
+<main class="my-24 flex justify-center max-w-6xl mx-auto px-4">
+	{#if !bestellungen || bestellungen.length === 0}
+		<p class="text-center text-gray-500">Keine Bestellungen gefunden.</p>
+	{/if}
+	{#each periods as dt}
+		{@const jahrMonat = dt.format("Y-MM")}	
+		{#if jahrMonat in bestellungenNachMonat && bestellungenNachMonat[jahrMonat].length > 0}
+			<!-- Echo dropdown foreach month. -->
+			{@const provisionMonat = bestellungenNachMonat[jahrMonat].reduce((acc, bestellung) => {
+				return acc + provisionen[bestellung.ausweis.ausweisart] || 0;
+			}, 0) * 1.19}
+			
+			<!-- <div onclick="$(this).nextUntil('.dropdown_month').filter('table').toggle(); $('#betrag_gesamt').html('Abrechnungsbetrag $month_name: <b>$provision_month €</b>')" class='dropdown_month'>
+				<p>$month_name $year_name - Klicke, um Tabelle anzuzeigen</p>
+				<a target='_blank' rel='noreferrer noopener' href='/user/abrechnung/pdf.php?month={dt.format("m")}&year={dt.format("Y")}'>PDF Ansehen</a>
+			</div> -->
+			<table class="w-full mb-4 border-collapse border border-gray-300">
+				<thead>
+					<tr class="bg-primary text-white">
+						<td class="text-center font-bold">ID</td>
+						<td class="text-center font-bold">DATUM</td>
+						<td class="text-center font-bold">GEBÄUDEADRESSE </td>
+						<td class="text-center font-bold">PLZ </td>
+						<td class="text-center font-bold">ORT </td>
+						<td class="text-center font-bold">AUSWEIS</td>
+						<td class="text-center font-bold w-48">BETRAG NETTO</td>
+					</tr>
+				</thead>
+				<tbody class="text-sm">
+					<tr class="bg-secondary text-white">
+						<td class="text-center font-bold" colspan="6">{months[dt.format("MM")]} {dt.format("YYYY")}</td>
+						<td class="text-right font-bold w-48" style="font-family: monospace;">{provisionMonat.toFixed(2)} €</td>
+					</tr>
+				</tbody>
+				{#each bestellungenNachMonat[jahrMonat] as bestellung}
+						{@const provisionBestellung = provisionen[bestellung.ausweis.ausweisart] || 0}
+						<tr>
+							<td class="text-center px-4 w-24" style="font-family: monospace;">{bestellung.id}</td>	
+							<td class="text-center font-bold w-32">{moment(bestellung.created_at).format("DD.MM.YYYY")}</td>
+							<td class="text-left w-64">{bestellung.ausweis.aufnahme.objekt.adresse}</td>
+							<td class="text-center w-16">{bestellung.ausweis.aufnahme.objekt.plz}</td>
+							<td class="text-left w-64">{bestellung.ausweis.aufnahme.objekt.ort}</td>
+							<td class="text-center w-32">{bestellung.ausweis.ausweisart}</td>
+							<td class="text-right w-48" style="font-family: monospace;">{provisionBestellung.toFixed(2)} €</td>
+						</tr>
+				{/each}
+		</table>
+		{/if}
+	{/each}
+</main>