update ui a little bit

ui/src/client/api.ts

@@ -30,6 +30,21 @@ export class AccuribetAPI {
  }
 
 
+ async getPredictedGames(
+   date: string,
+   model: string
+ ) {
+   const res = await this.client.get('/model/history', {
+      params: {
+        date,
+        model
+      }
+   })
+   return res.data;
+
+ }
+
+
  async predict(
    model: string
  ) {

ui/src/components/display-card.tsx

@@ -32,6 +32,7 @@ import {
 } from "~/components/ui/table";
 import { isLive, timeUntilGame } from "~/lib/utils.ts";
 import { Prediction } from "~/model/prediction.ts";
+import { AnimationDiv } from '~/components/animated-div.tsx';
 
 const logos = import.meta.glob("../assets/teams/*.svg", { eager: true });
 
@@ -167,6 +168,7 @@ export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
               props.prediction.prediction === `${props.team.city} ${props.team.name}`
             }
           >
+            <AnimationDiv animate={{ x: [0, 0], opacity: [0, 1] }}>
             <Badge
               class={`ml-2 ${getColorFromStatusAndOutcome(
                 props.game.status,
@@ -175,6 +177,7 @@ export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
             >
               Projected Winner
             </Badge>
+            </AnimationDiv>
           </Show>
         </span>
       </CardDescription>
@@ -316,6 +319,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                       <span class="text-white light:text-black">{props.game.home_team.name}</span>
                       <span class="text-white light:text-200 bg-700 py-2 px-4 rounded inline-block">
                         {props.game.home_team.score.points}
+
                       </span>
                     </div>
                     <span class="text-sm text-gray-400"> - </span>
@@ -370,7 +374,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                 onOpenChange={setInjuryReportOpen}
                 preventScroll={true}
               >
-                <AlertDialogContent class="bg-900 p-4 rounded-lg">
+                <AlertDialogContent class="bg-primary opacity-100  p-4 rounded-lg">
                   <AlertDialogTitle class="flex flex-row justify-center items-center text-2xl font-bold mb-2">
                     Injury Report
                   </AlertDialogTitle>

ui/src/pages/History.tsx

@@ -1,5 +1,5 @@
 import { AccuribetAPI } from '~/client/api.ts';
-import { createResource, Match, Switch } from 'solid-js';
+import { createResource, createSignal, For, Match, Show, Switch } from 'solid-js';
 import { AnimationDiv } from '~/components/animated-div.tsx';
 import { Loading } from '~/components/loading.tsx';
 
@@ -8,11 +8,20 @@ async function fetchHistory() {
   return await instance.getDates();
 }
 
+async function fetchHistoryForModelOnDate(model: string, date: string) {
+  const instance = AccuribetAPI.getInstance();
+  return await instance.getPredictedGames(date, model);
+
+}
 
 
 export function History() {
 
   const [dates] = createResource(fetchHistory);
+  const [selectedModel, setSelectedModel] = createSignal('')
+  const [selectedDate, setSelectedDate] = createSignal('')
+
+
 
   return (
     <AnimationDiv>
@@ -24,9 +33,30 @@ export function History() {
           <h1>Error fetching dates</h1>
         </Match>
         <Match when={dates()}>
-          <div>
-            <h1 class={'text-3xl text-100'}>History</h1>
-          </div>
+          <AnimationDiv class={'flex flex-col items-center'}>
+            <span class={'text-100 text-2xl'}>
+              I would like to see the history of the
+              <select
+                class={'mx-3 bg-primary border-b-100  border-opacity-50 text-100'}
+                onChange={(e) => setSelectedModel(e.currentTarget.value)}
+                disabled={dates.loading}
+              >
+                <For each={dates()}>
+                  {date => (
+                    <option value={date.model_name}>{date.model_name}</option>
+                  )}
+                </For>
+            </select>
+              model
+            </span>
+
+            <Show when={selectedModel()}>
+              <input
+                type={'date'}
+                class={"appearance-none mb-2 block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"}
+              />
+            </Show>
+          </AnimationDiv>
         </Match>
       </Switch>
     </AnimationDiv>

ui/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { Link } from "~/components/link.tsx";
 import { Motion } from "solid-motionone";
 import { Button } from "~/components/ui/button.tsx";
+import { AiFillGithub } from 'solid-icons/ai';
 
 export const Home = () => {
   return (
@@ -70,10 +71,10 @@ export const Home = () => {
                     <li>
                       <div class="grid gap-1">
                         <h3 class="text-xl font-bold text-primary light:text-black">
-                          80%+ Accuracy
+                          60%+ Accuracy
                         </h3>
                         <p class="text-secondary light:text-100">
-                          Our machine learning models have an average accuracy of over 80% on NBA
+                          Our machine learning models have an average accuracy of over 60% on NBA
                           game predictions.
                         </p>
                       </div>
@@ -126,11 +127,9 @@ export const Home = () => {
             ©&nbsp;{new Date().getFullYear()}&nbsp;Accuribet. All rights reserved.
           </p>
           <nav class="sm:ml-auto flex gap-4 sm:gap-6">
-            <Link class="text-xs hover:underline underline-offset-4" href="#">
-              Terms of Service
-            </Link>
-            <Link class="text-xs hover:underline underline-offset-4" href="#">
-              Privacy
+            <Link class="text-xs flex flex-row hover:underline underline-offset-4" href="https://github.com/day-mon/sports-betting-ai">
+              <AiFillGithub class="w-4 h-4 mx-2" />
+              Github
             </Link>
           </nav>
         </footer>