-
Notifications
You must be signed in to change notification settings - Fork 0
/
cover_page.tsx
94 lines (86 loc) · 2.32 KB
/
cover_page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import _ from "lodash";
import type { SummaryEntry } from "./download";
import React from "react";
import { ALL_IMPORTERS } from "./importers/importer";
import moment from "moment";
interface CoverPageProps {
entries: SummaryEntry[];
css: string;
}
export const CoverPage: React.FunctionComponent<CoverPageProps> = ({
entries,
css,
}) => {
return (
<html>
<head>
<title>Expenses</title>
<style type="text/css" dangerouslySetInnerHTML={{ __html: css }} />
</head>
<body>
<div className="root">
<div className="preface">
This file contains receipts for multiple transactions of the same
category. This cover page contains a summary of the transactions,
followed by all individual receipts on subsequent pages.
</div>
<EntriesTable entries={entries} />
</div>
</body>
</html>
);
};
interface EntriesTableProps {
entries: SummaryEntry[];
}
const EntriesTable: React.FunctionComponent<EntriesTableProps> = ({
entries,
}) => {
const total = _.sumBy(entries, (entry) => Number(entry.metadata.amt)).toFixed(
2
);
return (
<table className="entries-table">
<thead>
<th>Date</th>
<th>Merchant</th>
<th>Amount</th>
</thead>
<tbody>
{entries.map((entry) => (
<EntryRow entry={entry} key={entry.messageId} />
))}
<tr className="total-row">
<td colSpan={2} className="total-label">
Total:
</td>
<td className="amt total-amt">${total}</td>
</tr>
</tbody>
</table>
);
};
interface EntryRowProps {
entry: SummaryEntry;
}
const EntryRow: React.FunctionComponent<EntryRowProps> = ({ entry }) => {
const importer = _.find(
ALL_IMPORTERS,
(importer) => importer.name === entry.importerName
);
const importerDisplayName = importer?.displayName ?? "Unknown";
return (
<tr className="entry-row">
<td className="date">
{moment(entry.metadata.date).format("MMMM D, YYYY")}
</td>
<td className="merchant">
{importerDisplayName}{" "}
{entry.metadata.vendorName && (
<span className="vendor-name">({entry.metadata.vendorName})</span>
)}
</td>
<td className="amt">${entry.metadata.amt}</td>
</tr>
);
};