From 1c1a709b0329bafff65e1f60fc4767b33bb136a0 Mon Sep 17 00:00:00 2001
From: "Damon L. Montague Jr." <damon@montague.im>
Date: Mon, 12 Aug 2024 19:45:16 -0400
Subject: [PATCH] POOF

---
 ui/package-lock.json                 |  34 +++-
 ui/package.json                      |   2 +-
 ui/src/components/display-card.tsx   |   5 +-
 ui/src/components/ui/label.tsx       |  19 ++
 ui/src/components/ui/radio-group.tsx |  73 +++++++
 ui/src/constants.ts                  |  72 +++++++
 ui/src/pages/History.tsx             | 275 +++++++++++++++++++--------
 7 files changed, 391 insertions(+), 89 deletions(-)
 create mode 100644 ui/src/components/ui/label.tsx
 create mode 100644 ui/src/components/ui/radio-group.tsx
 create mode 100644 ui/src/constants.ts

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 35d38c3..e517165 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@accuribet/ui",
       "version": "0.0.1",
       "dependencies": {
-        "@kobalte/core": "^0.12.6",
+        "@kobalte/core": "^0.13.4",
         "@solidjs/router": "^0.10.9",
         "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
@@ -862,15 +862,17 @@
       }
     },
     "node_modules/@kobalte/core": {
-      "version": "0.12.6",
-      "resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.12.6.tgz",
-      "integrity": "sha512-+Ta2o2wEqZ2fCqLMkvjT40VHNmcFKdGe8TNDVQbbMPk66qoU6g/DDRFR/Ib7eAjb+C95VoIyk6zaafos2VOo0w==",
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.13.4.tgz",
+      "integrity": "sha512-ElvazoxoQU/z5pQUdHtXAzjiZA60J+Fo36WgO+j8sMvycIGwrlv+Fdr+uXcLSm1onYOYoSG1+vumD3Ce5OYzzw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.5.1",
         "@internationalized/date": "^3.4.0",
         "@internationalized/number": "^3.2.1",
         "@kobalte/utils": "^0.9.0",
+        "@solid-primitives/props": "^3.1.8",
+        "solid-presence": "^0.1.6",
         "solid-prevent-scroll": "^0.1.4"
       },
       "peerDependencies": {
@@ -3142,6 +3144,30 @@
         "solid-js": "^1.8.0"
       }
     },
+    "node_modules/solid-presence": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/solid-presence/-/solid-presence-0.1.8.tgz",
+      "integrity": "sha512-pWGtXUFWYYUZNbg5YpG5vkQJyOtzn2KXhxYaMx/4I+lylTLYkITOLevaCwMRN+liCVk0pqB6EayLWojNqBFECA==",
+      "license": "MIT",
+      "dependencies": {
+        "@corvu/utils": "~0.4.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.8"
+      }
+    },
+    "node_modules/solid-presence/node_modules/@corvu/utils": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@corvu/utils/-/utils-0.4.0.tgz",
+      "integrity": "sha512-LTjH/gSf4t/slzGoQdFYWrAykHp3A7JZYH+KjM5KCppVjDEY7pLjZkMTHU/vPF7gvjiXDYgA+6q68eiHRiJ8wA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.8"
+      }
+    },
     "node_modules/solid-prevent-scroll": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/solid-prevent-scroll/-/solid-prevent-scroll-0.1.9.tgz",
diff --git a/ui/package.json b/ui/package.json
index cf83bef..075ea81 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "description": "Web UI for Accuribet",
   "dependencies": {
-    "@kobalte/core": "^0.12.6",
+    "@kobalte/core": "^0.13.4",
     "@solidjs/router": "^0.10.9",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx
index 08a3cc7..9e07f11 100644
--- a/ui/src/components/display-card.tsx
+++ b/ui/src/components/display-card.tsx
@@ -30,7 +30,10 @@ import { DialogModal } from "~/components/dialog-modal.tsx";
 
 const logos = import.meta.glob("../assets/teams/*.svg", { eager: true });
 
-const getLogo = (team: string) => {
+export const getLogo = (team: string) => {
+  // if team is not all lower make it lower
+    if (team !== team.toLowerCase()) team = team.toLowerCase()
+
   let strIndex = `../assets/teams/${team}.svg`;
   // @ts-ignore
   return logos[strIndex].default;
diff --git a/ui/src/components/ui/label.tsx b/ui/src/components/ui/label.tsx
new file mode 100644
index 0000000..0b0d9d2
--- /dev/null
+++ b/ui/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import type { Component, ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+import { cn } from "~/lib/utils"
+
+const Label: Component<ComponentProps<"label">> = (props) => {
+    const [local, others] = splitProps(props, ["class"])
+    return (
+        <label
+            class={cn(
+                "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                local.class
+            )}
+            {...others}
+        />
+    )
+}
+
+export { Label }
\ No newline at end of file
diff --git a/ui/src/components/ui/radio-group.tsx b/ui/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..ff278fd
--- /dev/null
+++ b/ui/src/components/ui/radio-group.tsx
@@ -0,0 +1,73 @@
+import type { JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as RadioGroupPrimitive from "@kobalte/core/radio-group"
+
+import { cn } from "~/lib/utils"
+
+type RadioGroupRootProps<T extends ValidComponent = "div"> =
+    RadioGroupPrimitive.RadioGroupRootProps<T> & { class?: string | undefined }
+
+const RadioGroup = <T extends ValidComponent = "div">(
+    props: PolymorphicProps<T, RadioGroupRootProps<T>>
+) => {
+    const [local, others] = splitProps(props as RadioGroupRootProps, ["class"])
+    return <RadioGroupPrimitive.Root class={cn("grid gap-2", local.class)} {...others} />
+}
+
+type RadioGroupItemProps<T extends ValidComponent = "div"> =
+    RadioGroupPrimitive.RadioGroupItemProps<T> & {
+    class?: string | undefined
+    children?: JSX.Element
+}
+
+const RadioGroupItem = <T extends ValidComponent = "div">(
+    props: PolymorphicProps<T, RadioGroupItemProps<T>>
+) => {
+    const [local, others] = splitProps(props as RadioGroupItemProps, ["class", "children"])
+    return (
+        <RadioGroupPrimitive.Item class={cn("flex items-center space-x-2", local.class)} {...others}>
+            <RadioGroupPrimitive.ItemInput />
+            <RadioGroupPrimitive.ItemControl class="aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+                <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="size-2.5 fill-current text-current"
+                    >
+                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                    </svg>
+                </RadioGroupPrimitive.ItemIndicator>
+            </RadioGroupPrimitive.ItemControl>
+            {local.children}
+        </RadioGroupPrimitive.Item>
+    )
+}
+
+type RadioGroupLabelProps<T extends ValidComponent = "label"> =
+    RadioGroupPrimitive.RadioGroupLabelProps<T> & {
+    class?: string | undefined
+}
+
+const RadioGroupItemLabel = <T extends ValidComponent = "label">(
+    props: PolymorphicProps<T, RadioGroupLabelProps<T>>
+) => {
+    const [local, others] = splitProps(props as RadioGroupLabelProps, ["class"])
+    return (
+        <RadioGroupPrimitive.ItemLabel
+            class={cn(
+                "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                local.class
+            )}
+            {...others}
+        />
+    )
+}
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemLabel }
\ No newline at end of file
diff --git a/ui/src/constants.ts b/ui/src/constants.ts
new file mode 100644
index 0000000..615b3b3
--- /dev/null
+++ b/ui/src/constants.ts
@@ -0,0 +1,72 @@
+
+
+export const TEAM_NAME_ABBRV_MAP: Record<string, string> = {
+    'Atlanta Hawks': 'ATL',
+    'Brooklyn Nets': 'BKN',
+    'Boston Celtics': 'BOS',
+    'Charlotte Hornets': 'CHA',
+    'Chicago Bulls': 'CHI',
+    'Cleveland Cavaliers': 'CLE',
+    'Dallas Mavericks': 'DAL',
+    'Denver Nuggets': 'DEN',
+    'Detroit Pistons': 'DET',
+    'Golden State Warriors': 'GSW',
+    'Houston Rockets': 'HOU',
+    'Indiana Pacers': 'IND',
+    'Los Angeles Clippers': 'LAC',
+    'Los Angeles Lakers': 'LAL',
+    'Memphis Grizzlies': 'MEM',
+    'Miami Heat': 'MIA',
+    'Milwaukee Bucks': 'MIL',
+    'Minnesota Timberwolves': 'MIN',
+    'New Orleans Pelicans': 'NOP',
+    'New York Knicks': 'NYK',
+    'Oklahoma City Thunder': 'OKC',
+    'Orlando Magic': 'ORL',
+    'Philadelphia 76ers': 'PHI',
+    'Phoenix Suns': 'PHX',
+    'Portland Trail Blazers': 'POR',
+    'Sacramento Kings': 'SAC',
+    'San Antonio Spurs': 'SAS',
+    'Toronto Raptors': 'TOR',
+    'Utah Jazz': 'UTA',
+    'Washington Wizards': 'WAS',
+};
+interface LocationData {
+    name: string;
+    city: string;
+    state: string;
+
+}
+export const LOCATION_DATA: Record<string, LocationData>  = {
+    "ATL": {"name": "State Farm Arena", "city": "Atlanta", "state": "GA"},
+    "BOS": {"name": "TD Garden", "city": "Boston", "state": "MA"},
+    "BRK": {"name": "Barclays Center", "city": "Brooklyn", "state": "NY"},
+    "CHA": {"name": "Spectrum Center", "city": "Charlotte", "state": "NC"},
+    "CHI": {"name": "United Center", "city": "Chicago", "state": "IL"},
+    "CLE": {"name": "Rocket Mortgage FieldHouse", "city": "Cleveland", "state": "OH"},
+    "DAL": {"name": "American Airlines Center", "city": "Dallas", "state": "TX"},
+    "DEN": {"name": "Ball Arena", "city": "Denver", "state": "CO"},
+    "DET": {"name": "Little Caesars Arena", "city": "Detroit", "state": "MI"},
+    "GSW": {"name": "Chase Center", "city": "San Francisco", "state": "CA"},
+    "HOU": {"name": "Toyota Center", "city": "Houston", "state": "TX"},
+    "IND": {"name": "Gainbridge Fieldhouse", "city": "Indianapolis", "state": "IN"},
+    "LAC": {"name": "Crypto.com Arena", "city": "Los Angeles", "state": "CA"},
+    "LAL": {"name": "Crypto.com Arena", "city": "Los Angeles", "state": "CA"},
+    "MEM": {"name": "FedExForum", "city": "Memphis", "state": "TN"},
+    "MIA": {"name": "FTX Arena", "city": "Miami", "state": "FL"},
+    "MIL": {"name": "Fiserv Forum", "city": "Milwaukee", "state": "WI"},
+    "MIN": {"name": "Target Center", "city": "Minneapolis", "state": "MN"},
+    "NOP": {"name": "Smoothie King Center", "city": "New Orleans", "state": "LA"},
+    "NYK": {"name": "Madison Square Garden", "city": "New York", "state": "NY"},
+    "OKC": {"name": "Paycom Center", "city": "Oklahoma City", "state": "OK"},
+    "ORL": {"name": "Amway Center", "city": "Orlando", "state": "FL"},
+    "PHI": {"name": "Wells Fargo Center", "city": "Philadelphia", "state": "PA"},
+    "PHX": {"name": "Footprint Center", "city": "Phoenix", "state": "AZ"},
+    "POR": {"name": "Moda Center", "city": "Portland", "state": "OR"},
+    "SAC": {"name": "Golden 1 Center", "city": "Sacramento", "state": "CA"},
+    "SAS": {"name": "AT&T Center", "city": "San Antonio", "state": "TX"},
+    "TOR": {"name": "Scotiabank Arena", "city": "Toronto", "state": "ON"},
+    "UTA": {"name": "Vivint Arena", "city": "Salt Lake City", "state": "UT"},
+    "WAS": {"name": "Capital One Arena", "city": "Washington D.C.", "state": "DC"},
+}
diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index 7d06e54..064fbd6 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -1,8 +1,14 @@
 import { AccuribetAPI } from "~/client/api.ts";
-import { createResource, createSignal, For, Match, Show, Switch } from "solid-js";
+import { createResource, createSignal, For, Show, Suspense } from "solid-js";
 import { AnimationDiv } from "~/components/animated-div.tsx";
 import { Loading } from "~/components/loading.tsx";
-import { HistoryDate, HistoryGame } from "~/interface.ts";
+import { HistoryDate,} from "~/interface.ts";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Label } from "~/components/ui/label";
+import {FiCalendar, FiAlertCircle, FiXCircle, FiCheckCircle, FiMapPin} from 'solid-icons/fi';
+import { ErrorBoundary } from "solid-js";
+import {getLogo} from "~/components/display-card.tsx";
+import {LOCATION_DATA, TEAM_NAME_ABBRV_MAP} from "~/constants.ts";
 
 async function fetchHistory() {
   const instance = AccuribetAPI.getInstance();
@@ -14,99 +20,202 @@ interface IHistory {
   date: string;
 }
 
-async function fetchHistoryForModelOnDate(value: IHistory): Promise<HistoryGame[] | undefined> {
+
+
+async function fetchHistoryForModelOnDate(value: IHistory): Promise<any[] | undefined> {
   if (value.date === "" || value.model === "") return undefined;
   const instance = AccuribetAPI.getInstance();
   return await instance.getPredictedGames(value.date, value.model);
 }
 
+
+function ModelSelector(props: { dates: HistoryDate[], onSelect: (model: string) => void, selectedModel: string }) {
+  return (
+      <div class="flex flex-row justify-center">
+        <For each={props.dates}>
+          {date => (
+              <div>
+                <input
+                    type="radio"
+                    id={date.model_name}
+                    name="model"
+                    value={date.model_name}
+                    checked={props.selectedModel === date.model_name}
+                    onChange={() => props.onSelect(date.model_name)}
+                    class="peer sr-only"
+                />
+                <Label
+                    for={date.model_name}
+                    class="flex cursor-pointer items-center justify-center rounded-md border-2 border-600 bg-secondary px-12 py-4 text-300 hover:bg-100 hover:text-primary peer-checked:border-primary peer-checked:bg-primary peer-checked:text-50"
+                >
+                  {date.model_name}
+                </Label>
+              </div>
+          )}
+        </For>
+      </div>
+  );
+}
+
+function DateSelector(props: { date: string, onChange: (date: string) => void, minDate?: string, maxDate: string }) {
+  return (
+      <div class="space-y-2 text-center">
+        <Label for="date-input" class="text-300 text-center font-semibold">Select a date</Label>
+        <div class="relative">
+          <FiCalendar class="absolute left-3 top-1/2 -translate-y-1/2 text-600" />
+          <input
+              id="date-input"
+              type="date"
+              class="w-full rounded-md border border-600 bg-secondary px-3 py-2 text-sm text-800 placeholder-600 focus:border-primary focus:ring-1 focus:ring-primary pl-10"
+              value={props.date}
+              onChange={(event) => props.onChange(event.target.value)}
+              max={props.maxDate}
+              min={props.minDate}
+          />
+        </div>
+      </div>
+  );
+}
+
+function HistoryList(props: { games: any[] }) {
+  const correctPredictions = props.games.filter(game => game.prediction_was_correct).length;
+
+  const percentageCorrect = (correctPredictions / props.games.length) * 100;
+
+  return (
+      <Show
+          when={props.games.length > 0}
+          fallback={
+            <Card class="bg-secondary p-6 text-center">
+              <FiAlertCircle class="mx-auto mb-4 h-12 w-12 text-600" />
+              <p class="text-lg font-semibold text-800">No games available for this date and model.</p>
+              <p class="mt-2 text-sm text-600">Try selecting a different date or model.</p>
+            </Card>
+          }
+      >
+        <div class="space-y-4">
+          <Card class="bg-secondary p-4">
+            <p class="text-center text-lg font-semibold text-300">
+              Predictions Correct: {percentageCorrect.toFixed(2)}%
+            </p>
+          </Card>
+          <For each={props.games}>
+            {game => {
+              const homeWon = game.home_team_score > game.away_team_score;
+
+              const abbrv = TEAM_NAME_ABBRV_MAP[game.home_team_name];
+              const location = LOCATION_DATA[abbrv] || { name: "", city: "", state: "" }
+
+              return (
+                  <Card class={`overflow-hidden ${homeWon ? 'bg-blue-100' : 'bg-red-100'}`}>
+                    <CardContent class="p-6">
+                      <div class="flex items-center justify-between">
+                        <div class="flex items-center space-x-4">
+                          <img src={getLogo(TEAM_NAME_ABBRV_MAP[game.home_team_name])} alt={game.home_team_name} class="w-12 h-12" />
+                          <div>
+                            <p class={`text-lg font-semibold ${homeWon ? 'text-blue-800' : 'text-800'}`}>{game.home_team_name}</p>
+                            <p class="text-2xl font-bold text-primary">{game.home_team_score}</p>
+                          </div>
+                        </div>
+                        <div class="text-center">
+                          <p class="text-sm font-semibold text-800">vs</p>
+                          <p class="text-sm text-600">{new Date(game.date).toLocaleDateString()}</p>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                          <div class="text-right">
+                            <p class={`text-lg font-semibold ${!homeWon ? 'text-red-800' : 'text-800'}`}>{game.away_team_name}</p>
+                            <p class="text-2xl font-bold text-primary">{game.away_team_score}</p>
+                          </div>
+                          <img src={getLogo(TEAM_NAME_ABBRV_MAP[game.away_team_name])} alt={game.away_team_name} class="w-12 h-12" />
+                        </div>
+                      </div>
+                      <div class="mt-4 flex items-center justify-center space-x-2">
+                        <p class="text-sm font-semibold text-800">Prediction: {game.prediction}</p>
+                        {game.prediction_was_correct ? (
+                            <FiCheckCircle class="text-green-700" />
+                        ) : (
+                            <FiXCircle class="text-red-700" />
+                        )}
+                      </div>
+                      <div class="mt-2 flex items-center justify-center text-sm text-600">
+                        <FiMapPin class="mr-1" />
+                        <span>{location.name}, {location.city}, {location.state}</span>
+                      </div>
+                    </CardContent>
+                  </Card>
+              );
+            }}
+          </For>
+        </div>
+      </Show>
+  );
+}
+
 export function History() {
   const [dates] = createResource<HistoryDate[]>(fetchHistory);
-  const [currentData, setCurrentData] = createSignal<IHistory>({ model: "", date: "" } as IHistory);
+  const [currentData, setCurrentData] = createSignal<IHistory>({ model: "", date: "" });
   const [historyResource] = createResource(currentData, fetchHistoryForModelOnDate);
 
   const oldestDateForModel = () => {
-    if (!dates.error && dates()) {
-      const datesForModel = dates()?.find(date => date.model_name === currentData().model);
-      if (datesForModel) {
-        return datesForModel.dates[datesForModel.dates.length - 1];
-      }
+    if (dates() && currentData().model) {
+      const datesForModel = dates()?.find(date => date.model_name === currentData().model)?.dates;
+      return datesForModel ? datesForModel[datesForModel.length - 1] : undefined;
     }
   };
 
+  const handleModelChange = (modelName: string) => {
+    setCurrentData({ model: modelName, date: "" });
+  };
+
   return (
-    <main class="flex-grow bg-primary pt-4">
-      <AnimationDiv>
-        <Switch>
-          <Match when={dates.loading}>
-            <Loading />
-          </Match>
-          <Match when={dates.error}>
-            <h1>Error fetching dates</h1>
-          </Match>
-          <Match when={dates()}>
-            <AnimationDiv class={"flex flex-col items-center"}>
-              <span class={"text-2xl text-100"}>
-                I would like to see the history of the
-                <select
-                  class={"mx-3 appearance-none border-b border-white bg-primary text-100"}
-                  onChange={e => setCurrentData({ ...currentData(), model: e.target.value })}
-                  disabled={dates.loading}
-                >
-                  <option disabled selected>
-                    ...
-                  </option>
-                  <For each={dates()}>
-                    {date => <option value={date.model_name}>{date.model_name}</option>}
-                  </For>
-                </select>
-                model
-              </span>
-
-              <Show when={historyResource.error}>
-                <span class={"mt-2 rounded-full bg-gray-200 px-3 py-1 font-bold text-red-500"}>
-                  Error! {historyResource.error.message}
-                </span>
-              </Show>
-
-              <Show when={currentData().model}>
-                <input
-                  type={"date"}
-                  class={
-                    "mb-2 block appearance-none rounded border border-gray-200 bg-gray-200 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
-                  }
-                  onChange={event => {
-                    setCurrentData({ ...currentData(), date: event.target.value });
-                  }}
-                  max={new Date().toISOString().split("T")[0]}
-                  min={oldestDateForModel()}
-                />
-              </Show>
-
-              <Show when={historyResource()}>
-                <AnimationDiv class={"flex h-fit w-1/2 flex-col items-center justify-between"}>
-                  <For each={historyResource()}>
-                    {game => (
-                      <AnimationDiv
-                        id={game.game_id}
-                        class="mx-100 mt-2 flex w-full flex-col items-center rounded-lg bg-secondary p-4 font-bold text-100"
-                      >
-                        <span>
-                          {game.home_team_name} vs {game.away_team_name}
-                        </span>
-                        <span>
-                          {game.home_team_score} - {game.away_team_score}
-                        </span>
-                        <span>{game.date}</span>
-                      </AnimationDiv>
-                    )}
-                  </For>
-                </AnimationDiv>
-              </Show>
-            </AnimationDiv>
-          </Match>
-        </Switch>
-      </AnimationDiv>
-    </main>
+      <main class="flex-grow bg-primary pt-8 font-monserrat">
+        <AnimationDiv class="container mx-auto px-4">
+          <Card class="bg-secondary text-800 shadow-lg">
+            <CardHeader class="text-center">
+              <CardTitle class="text-3xl font-bold text-300">Prediction History</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ErrorBoundary fallback={(err: Error) => {
+                  console.log(`Name: ${err.name}, Message: ${err.message}, Stack ${err.stack}`); // `Name: Error, Message: An error occurred
+                  return (
+                  <div class="rounded-md bg-100 p-4 text-center text-800">
+                    <FiAlertCircle class="mx-auto mb-2 h-6 w-6 text-600" />
+                    <p class="font-semibold">An error occurred</p>
+                    <p class="text-sm text-600">{err.message}</p>
+                  </div>
+
+              )}}>
+                <Suspense fallback={<Loading />}>
+                  <div class="space-y-6">
+                    <div class="space-y-4">
+                      <Label class="text-center block text-300 font-semibold">Select a model</Label>
+                      <ModelSelector
+                          dates={dates() || []}
+                          onSelect={handleModelChange}
+                          selectedModel={currentData().model}
+                      />
+
+                      <Show when={currentData().model}>
+                        <DateSelector
+                            date={currentData().date}
+                            onChange={(date) => setCurrentData({ ...currentData(), date })}
+                            maxDate={new Date().toISOString().split("T")[0]}
+                            minDate={oldestDateForModel()}
+                        />
+                      </Show>
+                    </div>
+
+                    <Suspense fallback={<Loading />}>
+                      <Show when={historyResource()}>
+                        <HistoryList games={historyResource() || []} />
+                      </Show>
+                    </Suspense>
+                  </div>
+                </Suspense>
+              </ErrorBoundary>
+            </CardContent>
+          </Card>
+        </AnimationDiv>
+      </main>
   );
-}
+}
\ No newline at end of file