Add latest training to Home page, make dates readable

webclient/src/Cards.js

@@ -36,7 +36,7 @@ export function Cards(props) {
 							<Table.Row>
 								<Table.HeaderCell>Number</Table.HeaderCell>
 								<Table.HeaderCell>Notes</Table.HeaderCell>
-								<Table.HeaderCell>Last Seen</Table.HeaderCell>
+								<Table.HeaderCell>Last Scan</Table.HeaderCell>
 								<Table.HeaderCell>Active</Table.HeaderCell>
 							</Table.Row>
 						</Table.Header>

webclient/src/Home.js

@@ -14,8 +14,9 @@ function MemberInfo(props) {
 	const user = props.user;
 	const member = user.member;
 
-	const lastTrans = user.transactions && user.transactions.slice(0,3);
+	const lastTrans = user.transactions?.slice(0,3);
-	const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen < b.last_seen)[0];
+	const lastTrain = user.training?.sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).slice(0,3);
+	const lastCard = user.cards?.sort((a, b) => a.last_seen < b.last_seen)[0];
 
 	return (
 		<div>
@@ -47,7 +48,7 @@ function MemberInfo(props) {
 							</Table.Row>
 							<Table.Row>
 								<Table.Cell>Expiry:</Table.Cell>
-								<Table.Cell>{member.expire_date}</Table.Cell>
+								<Table.Cell>{moment(member.expire_date).format('ll')}</Table.Cell>
 							</Table.Row>
 						</Table.Body>
 					</BasicTable>
@@ -82,29 +83,75 @@ function MemberInfo(props) {
 				<QRCode value={siteUrl + '/subscribe?monthly_fees=' + user.member.monthly_fees + '&id=' + user.member.id} />
 			</React.Fragment>}
 
+			<Header size='medium'>Latest Training</Header>
+			<BasicTable>
+				<Table.Body>
+					{lastTrain.length ?
+						lastTrain.map(x =>
+							<Table.Row key={x.id}>
+								<Table.Cell style={{ minWidth: '8rem' }}>
+									<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).tz('America/Edmonton').format('ll')}</Link>
+								</Table.Cell>
+								<Table.Cell>{x.session.course_data.name}</Table.Cell>
+							</Table.Row>
+						)
+					:
+						<Table.Row><Table.Cell>None, please sign up for an <Link to={'/courses/249/'}>Orientation</Link></Table.Cell></Table.Row>
+					}
+					{user.training.length > 3 && <Link to='/training'>[more]</Link>}
+				</Table.Body>
+			</BasicTable>
+
+			<Header size='medium'>Latest Transactions</Header>
+			<BasicTable>
+				<Table.Body>
+					{lastTrans.length ?
+						lastTrans.map(x =>
+							<Table.Row key={x.id}>
+								<Table.Cell style={{ minWidth: '8rem' }}>
+									<Link to={'/transactions/'+x.id}>{moment(x.date).format('ll')}</Link>
+								</Table.Cell>
+								<Table.Cell>{x.account_type}</Table.Cell>
+								<Table.Cell>${x.amount}</Table.Cell>
+							</Table.Row>
+						)
+					:
+						<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
+					}
+					{user.transactions.length > 3 && <Link to='/transactions'>[more]</Link>}
+				</Table.Body>
+			</BasicTable>
+
 			<Header size='medium'>Details</Header>
 			<BasicTable>
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Application:</Table.Cell>
-						<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
+						<Table.Cell>{moment(member.application_date).format('ll') || 'Unknown'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Start:</Table.Cell>
-						<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
+						<Table.Cell>{moment(member.current_start_date).format('ll') || 'Unknown'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Vetted:</Table.Cell>
-						<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
+						<Table.Cell>{moment(member.vetted_date).format('ll') || 'Not vetted'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
-						<Table.Cell>Monthly:</Table.Cell>
+						<Table.Cell>Monthly dues:</Table.Cell>
-						<Table.Cell>${member.monthly_fees || 'Unknown'}</Table.Cell>
+						<Table.Cell>${member.monthly_fees || 'Unknown'}.00</Table.Cell>
 					</Table.Row>
 					<Table.Row>
-						<Table.Cell>Card Number:</Table.Cell>
+						<Table.Cell>Last scan:</Table.Cell>
 						<Table.Cell>
-							{lastCard && lastCard.card_number || 'None'}
+							{lastCard && lastCard.last_seen ?
+								lastCard.last_seen > '2021-11-14T02:01:35.415685Z' ?
+									moment.utc(lastCard.last_seen).tz('America/Edmonton').format('lll')
+								:
+									moment.utc(lastCard.last_seen).tz('America/Edmonton').format('ll')
+							:
+								'Unknown'
+							}
 							{user.cards.length > 1 && <Link to='/cards'> [more]</Link>}
 						</Table.Cell>
 					</Table.Row>
@@ -116,25 +163,6 @@ function MemberInfo(props) {
 					View application forms
 				</a>
 			</p>}
-
-			<Header size='medium'>Latest Transactions</Header>
-			<BasicTable>
-				<Table.Body>
-					{lastTrans.length ?
-						lastTrans.map(x =>
-							<Table.Row key={x.id}>
-								<Table.Cell>
-									<Link to={'/transactions/'+x.id}>{x.date}</Link>
-								</Table.Cell>
-								<Table.Cell>{x.account_type}</Table.Cell>
-								<Table.Cell>${x.amount}</Table.Cell>
-							</Table.Row>
-						)
-					:
-						<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-					}
-				</Table.Body>
-			</BasicTable>
 		</div>
 	);
 };

webclient/src/Training.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { requester, getInstructor } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
@@ -96,7 +96,7 @@ export function TrainingList(props) {
 					<Table.Row key={x.id}>
 						<Table.Cell>{x.session.course_data.name}</Table.Cell>
 						<Table.Cell>
-							<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
+							<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).tz('America/Edmonton').format('ll')}</Link>
 						</Table.Cell>
 						<Table.Cell>{x.attendance_status}</Table.Cell>
 						<Table.Cell>{getInstructor(x.session)}</Table.Cell>
@@ -113,12 +113,6 @@ export function Training(props) {
 
 	return (
 		<Container>
-			<Header size='large'>Your Certifications</Header>
-
-			<CertList member={user.member} />
-
-			<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
-
 			<Header size='large'>Your Training</Header>
 
 			{user.training.length ?
@@ -127,6 +121,11 @@ export function Training(props) {
 				<p>No training yet! Sign up for a course to take a class.</p>
 			}
 
+			<Header size='large'>Your Certifications</Header>
+
+			<CertList member={user.member} />
+
+			<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
 		</Container>
 	);
 };

webclient/src/Transactions.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import moment from 'moment-timezone';
 import ReactToPrint from 'react-to-print';
 import './light.css';
 import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
@@ -279,8 +280,8 @@ export function TransactionList(props) {
 				{transactions.length ?
 					transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x =>
 						<Table.Row key={x.id}>
-							<Table.Cell>
+							<Table.Cell style={{ minWidth: '8rem' }}>
-								<Link to={'/transactions/'+x.id}>{x.date}</Link>
+								<Link to={'/transactions/'+x.id}>{moment(x.date).format('ll')}</Link>
 							</Table.Cell>
 							{!noMember && <Table.Cell>
 								{x.member_id ?