Add summary table to admin transactions

webclient/src/AdminTransactions.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import './light.css';
-import { Container, Checkbox, Form, Header, Segment } from 'semantic-ui-react';
+import { Container, Checkbox, Form, Header, Segment, Table } from 'semantic-ui-react';
 import * as Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
@@ -42,12 +42,14 @@ export function AdminReportedTransactions(props) {
 };
 
 let transactionsCache = false;
+let summaryCache = false;
 let excludePayPalCache = false;
 
 export function AdminHistoricalTransactions(props) {
 	const { token } = props;
 	const [input, setInput] = useState({ month: moment() });
 	const [transactions, setTransactions] = useState(transactionsCache);
+	const [summary, setSummary] = useState(summaryCache);
 	const [excludePayPal, setExcludePayPal] = useState(excludePayPalCache);
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState(false);
@@ -75,6 +77,19 @@ export function AdminHistoricalTransactions(props) {
 			console.log(err);
 			setError(true);
 		});
+
+		requester('/transactions/summary/?month=' + month, 'GET', token)
+		.then(res => {
+			setLoading(false);
+			setError(false);
+			setSummary(res);
+			summaryCache = res;
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(true);
+		});
 	};
 
 	return (
@@ -96,10 +111,40 @@ export function AdminHistoricalTransactions(props) {
 					</Form.Button>
 				</Form.Group>
 			</Form>
+			{transactions && <p>Found {transactions.length} transactions.</p>}
+
+			{!error ?
+				summary && <div>
+					<Header size='small'>Summary</Header>
+
+					<Table basic='very'>
+						<Table.Header>
+							<Table.Row>
+								<Table.HeaderCell>Category</Table.HeaderCell>
+								<Table.HeaderCell>Dollar</Table.HeaderCell>
+								<Table.HeaderCell>Protocoin</Table.HeaderCell>
+							</Table.Row>
+						</Table.Header>
+
+						<Table.Body>
+							{summary.map(x =>
+								<Table.Row key={x.category}>
+									<Table.Cell>{x.category}</Table.Cell>
+									<Table.Cell>{'$ ' + x.dollar.toFixed(2)}</Table.Cell>
+									<Table.Cell>{'₱ ' + x.protocoin.toFixed(2)}</Table.Cell>
+								</Table.Row>
+							)}
+						</Table.Body>
+					</Table>
+				</div>
+			:
+				<p>Error loading summary.</p>
+			}
+
+			<p/>
 
 			{!error ?
 				transactions && <div>
-					<p>Found {transactions.length} transactions.</p>
 					{!!transactions.length &&
 						<Header size='small'>{moment(transactions[0].date, 'YYYY-MM-DD').format('MMMM YYYY')} Transactions</Header>
 					}