4 files changed, 60 insertions, 41 deletions
diff --git a/gui/src/components/app/App.css b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.css
index 8b13789..8b13789 100644
--- a/gui/src/components/app/App.css
+++ b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.css
diff --git a/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx
new file mode 100644
index 0000000..479d69f
--- /dev/null
+++ b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx
@@ -0,0 +1,36 @@
+import { BudgetUpdate } from '../../types/budgetUpdate';
+import './BudgetUpdatesTable.css';
+
+function BudgetUpdatesTable({ budgetUpdates }: Props) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <td>Date</td>
+          <td>Quantity</td>
+          <td>Period</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        { budgetUpdates.map(Row) }
+      </tbody>
+    </table>
+  );
+}
+
+function Row(budgetUpdate: BudgetUpdate) {
+  return (
+    <tr>
+      <td>{budgetUpdate.date.format("DD Mm YYYY")}</td>
+      <td>{budgetUpdate.newQuantity.toString()}</td>
+      <td>{budgetUpdate.newPeriod}</td>
+    </tr>
+  )
+}
+
+type Props = {
+  budgetUpdates: BudgetUpdate[];
+}
+
+export { BudgetUpdatesTable };
diff --git a/gui/src/components/app/App.tsx b/gui/src/components/app/App.tsx
deleted file mode 100644
index e9ef742..0000000
--- a/gui/src/components/app/App.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { createResource, Match, Resource, Switch } from 'solid-js';
-import Histogram from '../histogram/Histogram'
-import './App.css'
-import { getAllCategories } from '../../ajax/backend';
-import { Category } from '../../types/category';
-
-function App() {
-  const [categories] = createResource(getAllCategories);
-
-  return (
-    <Switch>
-      <Match when={categories.state === 'ready'}>
-        <Histogram categories={(categories as Extract<Resource<Category[]>, { state: 'ready' }>)()} />
-      </Match>
-      <Match when={categories.state === 'pending'}>
-        <p>Loading...</p>
-      </Match>
-      <Match when={categories.state === 'unresolved'}>
-        <p>Unresolved!</p>
-      </Match>
-      <Match when={categories.state === 'errored'}>
-        <p>Error!</p>
-        <p>{JSON.stringify(categories.error, null, 2)}</p>
-        <p>{JSON.stringify(categories(), null, 2)}</p>
-      </Match>
-      <Match when={categories.state === 'refreshing'}>
-        <p>Refreshing!</p>
-      </Match>
-    </Switch>
-  );
-}
-
-export default App
diff --git a/gui/src/components/histogram/Histogram.tsx b/gui/src/components/histogram/Histogram.tsx
index 3a8309b..1dd8c65 100644
--- a/gui/src/components/histogram/Histogram.tsx
+++ b/gui/src/components/histogram/Histogram.tsx
@@ -1,5 +1,7 @@
 import { BalanceToBudgetRatio } from "../../types/balanceToBudgetRatio";
 import { Category } from "../../types/category";
+import { Group } from "../../types/group";
+import { groupCategories } from "../../util/groupCategories";
 import './Histogram.scss';
 
 function Histogram({ categories }: Props) {
@@ -14,6 +16,8 @@ function Histogram({ categories }: Props) {
     category.balanceToBudgetRatio = balanceToBudgetRatioNormaliser(category.balanceToBudgetRatio);
   }
 
+  const groups = [...groupCategories(categories)];
+
   return (
     <table>
       <thead>
@@ -23,18 +27,26 @@ function Histogram({ categories }: Props) {
           <th>Balance</th>
         </tr>
       </thead>
-
-      <tbody>
-        {
-          categories
-            .sort((c1, c2) => BalanceToBudgetRatio.compare(c1.balanceToBudgetRatio, c2.balanceToBudgetRatio))
-            .map((category) => Row({ category }))
-        }
-      </tbody>
+      {
+        groups.map(g => <RowGroup group={g} />)
+      }
     </table>
   );
 }
 
+function RowGroup({ group }: GroupProps) {
+  return (
+    <tbody>
+      <tr role="heading" aria-level="3">{group.name}</tr>
+      {
+        group.categories
+          .sort((c1, c2) => BalanceToBudgetRatio.compare(c1.balanceToBudgetRatio, c2.balanceToBudgetRatio))
+          .map((category) => Row({ category }))
+      }
+    </tbody>
+  );
+}
+
 function Row({ category }: RowProps) {
   return (
     <tr>
@@ -57,6 +69,10 @@ type Props = {
   categories: Category[] | null,
 };
 
+type GroupProps = {
+  group: Group;
+}
+
 type RowProps = {
   category: Category,
 };