From aa6c81c48ce9f6e1e3967d1800a9ae0a6cbb98e9 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Thu, 9 Jan 2020 05:40:54 +0000
Subject: [PATCH] Display most recent transactions in member info

---
 apiserver/apiserver/api/models.py |  2 +-
 webclient/src/App.js              | 95 ++++++++++++++++++-------------
 2 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/apiserver/apiserver/api/models.py b/apiserver/apiserver/api/models.py
index a6e0c26..6054910 100644
--- a/apiserver/apiserver/api/models.py
+++ b/apiserver/apiserver/api/models.py
@@ -25,7 +25,7 @@ class Transaction(models.Model):
     recorder = models.ForeignKey(User, related_name='+', blank=True, null=True, on_delete=models.PROTECT)
 
     member_id = models.IntegerField(blank=True, null=True)
-    date = models.DateTimeField(default=now)
+    date = models.DateField(default=date.today)
     amount = models.DecimalField(max_digits=7, decimal_places=2)
     reference_number = models.CharField(max_length=32, blank=True, null=True)
     memo = models.TextField(blank=True, null=True)
diff --git a/webclient/src/App.js b/webclient/src/App.js
index 864f9de..16c4f87 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -239,54 +239,71 @@ function MemberInfo(props) {
 	const user = props.user;
 	const member = user.member;
 
+	const lastTrans = user.transactions.slice(-3);
+
 	return (
 		<div>
-			<Header size='large'>
-				<Icon.Group size='small'>
-					<Icon name='circle' color='green' />
-				</Icon.Group>
-				<Header.Content>{member.first_name} {member.last_name}</Header.Content>
-			</Header>
-
-			<p>Preferred Name: {member.preferred_name || '???'}</p>
-			<p>Email: {user.email}</p>
-
 			<Grid stackable>
 				<Grid.Column width={6}>
 					<Image src='https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' size='small' />
 				</Grid.Column>
 
 				<Grid.Column width={10}>
-					<Table unstackable basic='very'>
-						<Table.Body>
-							<Table.Row>
-								<Table.Cell>Expiry:</Table.Cell>
-								<Table.Cell>2099-01-01</Table.Cell>
-							</Table.Row>
-							<Table.Row>
-								<Table.Cell>Status:</Table.Cell>
-								<Table.Cell>Current</Table.Cell>
-							</Table.Row>
-							<Table.Row>
-								<Table.Cell>Application:</Table.Cell>
-								<Table.Cell>{member.application_date || '???'}</Table.Cell>
-							</Table.Row>
-							<Table.Row>
-								<Table.Cell>Start:</Table.Cell>
-								<Table.Cell>{member.current_start_date || '???'}</Table.Cell>
-							</Table.Row>
-							<Table.Row>
-								<Table.Cell>Vetted:</Table.Cell>
-								<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
-							</Table.Row>
-							<Table.Row>
-								<Table.Cell>Monthly</Table.Cell>
-								<Table.Cell>${member.monthly_fees || '???'}</Table.Cell>
-							</Table.Row>
-						</Table.Body>
-					</Table>
+					<Header size='large'>
+						<Icon.Group size='small'>
+							<Icon name='circle' color='green' />
+						</Icon.Group>
+						<Header.Content>{member.first_name} {member.last_name}</Header.Content>
+					</Header>
+
+					<p>Preferred Name: {member.preferred_name || '???'}</p>
+					<p>Email: {user.email}</p>
+					<p>Status: Current</p>
 				</Grid.Column>
 			</Grid>
+
+			<Header size='medium'>Details</Header>
+			<Table unstackable basic='very'>
+				<Table.Body>
+					<Table.Row>
+						<Table.Cell>Expiry:</Table.Cell>
+						<Table.Cell>2099-01-01</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Application:</Table.Cell>
+						<Table.Cell>{member.application_date || '???'}</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Start:</Table.Cell>
+						<Table.Cell>{member.current_start_date || '???'}</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Vetted:</Table.Cell>
+						<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Monthly</Table.Cell>
+						<Table.Cell>${member.monthly_fees || '???'}</Table.Cell>
+					</Table.Row>
+				</Table.Body>
+			</Table>
+
+			<Header size='medium'>Latest Transactions</Header>
+			<Table unstackable basic='very'>
+				<Table.Body>
+					{lastTrans.length ?
+						lastTrans.map((x, i) =>
+							<Table.Row key={i}>
+								<Table.Cell>{x.date}</Table.Cell>
+								<Table.Cell>{x.account_type}</Table.Cell>
+								<Table.Cell>${x.amount}</Table.Cell>
+							</Table.Row>
+						)
+					:
+						<p>None</p>
+					}
+				</Table.Body>
+			</Table>
 		</div>
 	);
 }
@@ -322,7 +339,7 @@ function App() {
 		setUserCache(false);
 	}
 
-	const menuName = user.member && user.member.preferred_name || 'Me';
+	const menuName = user && user.member && user.member.preferred_name || 'Me';
 
 	return (
 		<div>