feat(dashboard): #163 first summary

internal/template/dashboard/dashboard.templ

@@ -4,18 +4,41 @@ import "spend-sparrow/internal/types"
 
 templ Dashboard(summary *types.DashboardMonthlySummary) {
 	<div class="mt-10">
-		<label for="month">Select Month:</label>
-		<input name="month" type="date" class="input"/>
+		<form hx-get="/" hx-target="#dashboard" hx-trigger="change" hx-push-url="true">
+			<label for="month">Select Month:</label>
+			<input
+				name="month"
+				type="date"
+				class="input"
+				value={ summary.Month.String() }
+			/>
+		</form>
+		<div id="dashboard">
+			@DashboardData(summary)
+		</div>
+	</div>
+}
+
+templ DashboardData(summary *types.DashboardMonthlySummary) {
+	<div class="mt-10">
 		<section class="grid grid-cols-[auto_auto_auto_auto_1fr] gap-4">
 			<span>Savings</span>
 			<span>Income</span>
 			<span>Expenses</span>
 			<span>Total</span>
 			<span></span>
-			<span>{ summary.Savings }</span>
-			<span>{ summary.Income }</span>
-			<span>{ summary.Expenses }</span>
-			<span>{ summary.Total }</span>
+			<span>{ types.FormatEuros(summary.Savings) }</span>
+			@balance(summary.Income)
+			@balance(summary.Expenses)
+			@balance(summary.Total)
 		</section>
 	</div>
 }
+
+templ balance(balance int64) {
+	if balance < 0 {
+		<span class="text-red-700">{ types.FormatEuros(balance) }</span>
+	} else {
+		<span class="text-green-700">{ types.FormatEuros(balance) }</span>
+	}
+}