From a865df6eb042bb305d2f880386fd6d9e5551ec4d Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 13 Mar 2023 00:44:43 -0700
Subject: payments page formatting

---
 .../[username]/payments/[...page]/+page.svelte     | 32 +++++++++---------
 src/routes/(app)/payment/[id]/+page.svelte         | 39 +++++++++++++---------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index a502f8c3..84891b92 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -60,9 +60,11 @@
 		payments = payments.map((p) => ({
 			...p,
 			created: new Date(p.created),
+			total: p.amount + p.tip || 0,
 			amount_fiat: f((p.amount * p.rate) / sats, p.currency),
 			fee_fiat: p.fee ? f((p.fee * p.rate) / sats, p.currency) : null,
-			tip_fiat: p.tip ? f((p.tip * p.rate) / sats, p.currency) : null
+			tip_fiat: p.tip ? f((p.tip * p.rate) / sats, p.currency) : null,
+			total_fiat: f(((p.amount + p.tip || 0) * p.rate) / sats, p.currency)
 		}));
 
 		let keys = [
@@ -72,11 +74,13 @@
 			'rate',
 			'currency',
 			'amount',
-			'fee',
 			'tip',
+			'total',
+			'fee',
 			'amount_fiat',
-			'fee_fiat',
-			'tip_fiat'
+			'tip_fiat',
+			'total_fiat',
+			'fee_fiat'
 		];
 
 		let csv =
@@ -143,24 +147,20 @@
 				<a href={`/payment/${p.id}`}>
 					<div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4">
 						<div class="whitespace-nowrap my-auto">
-							<div class="font-bold">
-								{f(p.amount * (p.rate / sats), p.currency)}
-
+              <div class="font-bold" class:text-red-800={p.amount < 0}>
+								{f((Math.abs(p.amount) + p.tip || 0) * (p.rate / sats), p.currency)}
 								{#if p.tip}
-									<span class="text-sm">
-										+{f(p.tip * (p.rate / sats), p.currency)}
+									<span class="text-xs text-secondary">
+										{f(Math.abs(p.amount) * (p.rate / sats), p.currency)} + {f(
+											p.tip * (p.rate / sats),
+											p.currency
+										)}
 									</span>
 								{/if}
 							</div>
 
 							<div class="text-secondary">
-								{sat(p.amount)}
-
-								{#if p.tip}
-									<span class="text-sm">
-										+{sat(p.tip)}
-									</span>
-								{/if}
+								{sat(p.amount + p.tip)}
 							</div>
 						</div>
 
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 2e170a43..c3f8cdf0 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -7,6 +7,7 @@
 
 	export let data;
 	let { user, payment: p } = data;
+
 	let { username } = user;
 	let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
 	let a = Math.abs(amount);
@@ -36,33 +37,41 @@
 			</a>
 		</div>
 	{/if}
-
 	<div>
 		<span class="text-lg text-secondary">Amount</span>
 		<div>
 			{f(fiat(a, rate), currency)}
-			{#if tip}
-				<span class="text-lg">
-					+ {f(fiat(tip, rate), currency)}
-				</span>
-			{/if}
-			<span class="text-secondary"
-				>⚡️{`${s(a)}`}
-
-				{#if tip}
-					<span class="text-lg">
-						+ ⚡️{s(tip)}
-					</span>
-				{/if}
+			<span class="text-secondary text-lg">
+				⚡️{s(a)}
 			</span>
 		</div>
 	</div>
 
+	{#if tip}
+		<div>
+			<span class="text-lg text-secondary">Tip</span>
+			<div>
+				{f(fiat(tip, rate), currency)}
+				<span class="text-secondary text-lg">
+					⚡️{s(tip)}
+				</span>
+			</div>
+		</div>
+
+		<div>
+			<span class="text-lg text-secondary">Total</span>
+			<div>
+				{f(fiat(a + tip || 0, rate), currency)}
+				<span class="text-secondary text-lg">⚡️{`${s(a + tip || 0)}`} </span>
+			</div>
+		</div>
+	{/if}
+
 	<div>
 		<span class="text-lg text-secondary">Network fee</span>
 		<div>
 			{f(fiat(fee, rate), currency)}
-			<span class="text-secondary">⚡️{`${s(fee)}`}</span>
+			<span class="text-secondary text-lg">⚡️{`${s(fee)}`}</span>
 		</div>
 	</div>
 
-- 
cgit v1.2.3