5 files changed, 97 insertions, 0 deletions
diff --git a/gui/src/views/App.css b/gui/src/views/App.css
new file mode 100644
index 0000000..9775b76
--- /dev/null
+++ b/gui/src/views/App.css
@@ -0,0 +1,5 @@
+div {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+}
diff --git a/gui/src/views/App.tsx b/gui/src/views/App.tsx
new file mode 100644
index 0000000..80eb051
--- /dev/null
+++ b/gui/src/views/App.tsx
@@ -0,0 +1,19 @@
+import { createResource } from 'solid-js';
+import './App.css'
+import { getAllBudgetUpdates, getAllCategories } from '../ajax/backend';
+import { HistogramView } from './histogram/HistogramView';
+import { BudgetUpdatesTableView } from './budgetUpdatesTable/BudgetUpdatesTableView';
+
+function App() {
+  const [categories] = createResource(getAllCategories);
+  const [budgetUpdates] = createResource(getAllBudgetUpdates);
+
+  return (
+    <div>
+      <HistogramView categories={categories} />
+      <BudgetUpdatesTableView budgetUpdates={budgetUpdates} categories={categories} />
+    </div>
+  );
+}
+
+export default App
diff --git a/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.css b/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.css
new file mode 100644
index 0000000..e862976
--- /dev/null
+++ b/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.css
@@ -0,0 +1,10 @@
+div {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+form {
+  display: flex;
+  gap: 1rem;
+}
diff --git a/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.tsx b/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.tsx
new file mode 100644
index 0000000..465ea92
--- /dev/null
+++ b/gui/src/views/budgetUpdatesTable/BudgetUpdatesTableView.tsx
@@ -0,0 +1,32 @@
+import { createSignal, Match, Resource, Switch } from 'solid-js';
+import { BudgetUpdate } from '../../types/budgetUpdate';
+import { BudgetUpdatesTable } from '../../components/BudgetUpdatesTable/BudgetUpdatesTable';
+import { Category } from '../../types/category';
+import './BudgetUpdatesTableView.css';
+
+export function BudgetUpdatesTableView({ budgetUpdates, categories }: Props) {
+  const [newCategoryId, setCategoryId] = createSignal<number>();
+
+  const filteredAndSortedBudgetUpdates: BudgetUpdate[] = budgetUpdates()
+    ?.filter((bu) => bu.categoryId === newCategoryId())
+    ?.sort((bu1, bu2) => bu2.date.diff(bu1.date))
+    ?? [];
+
+  return (
+    <div>
+      <form action="none">
+        <label for="category">Category</label>
+        <select id="category" onChange={(e) => setCategoryId(Number(e.target.value))}>
+          {(categories() ?? []).map((c) =>
+            <option value={c.id}>{c.name}</option>)}
+        </select>
+      </form>
+      <BudgetUpdatesTable budgetUpdates={filteredAndSortedBudgetUpdates as BudgetUpdate[]} />
+    </div>
+  );
+}
+
+type Props = {
+  budgetUpdates: Resource<BudgetUpdate[] | null>;
+  categories: Resource<Category[] | null>;
+}
diff --git a/gui/src/views/histogram/HistogramView.tsx b/gui/src/views/histogram/HistogramView.tsx
new file mode 100644
index 0000000..30e64ca
--- /dev/null
+++ b/gui/src/views/histogram/HistogramView.tsx
@@ -0,0 +1,31 @@
+import { Match, Resource, Switch } from 'solid-js';
+import Histogram from '../../components/histogram/Histogram'
+import { Category } from '../../types/category';
+
+export function HistogramView({ categories }: Props) {
+  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>
+  );
+}
+
+type Props = {
+  categories: Resource<Category[] | null>;
+}