add price reaction section

src/lib/components/NextEarnings.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { stockTicker, displayCompanyName } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
-  import PastEarnings from "$lib/components/PastEarnings.svelte";
   export let data;
 
   let rawData = {};
@@ -21,7 +20,7 @@
 
   $: {
     if ($stockTicker) {
-      rawData = data?.getNextEarnings?.next;
+      rawData = data?.getNextEarnings;
       epsRatio =
         rawData?.epsPrior !== 0
           ? ((rawData?.epsEst / rawData?.epsPrior - 1) * 100)?.toFixed(2)
@@ -100,28 +99,3 @@
     </div>
   </div>
 {/if}
-
-{#if data?.getNextEarnings?.past?.length !== 0}
-  <div class="space-y-3 overflow-hidden mt-5 w-full">
-    <!--Start Content-->
-    <div class="w-full p-1 flex flex-col">
-      <div class="flex flex-col items-center w-full mb-3">
-        <div class="flex flex-row justify-start mr-auto items-center">
-          <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
-          <div class="flex flex-row items-center">
-            <h3
-              class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
-            >
-              Past Earnings Volatility
-            </h3>
-          </div>
-        </div>
-      </div>
-
-      <PastEarnings
-        userTier={data?.user?.tier}
-        rawData={data?.getNextEarnings?.past}
-      />
-    </div>
-  </div>
-{/if}

src/routes/stocks/[tickerID]/statistics/+layout.svelte

@@ -7,6 +7,7 @@
   function changeSubSection(state) {
     const subSectionMap = {
       "market-cap": "/statistics/market-cap",
+      "price-reaction": "/statistics/price-reaction",
       employees: "/statistics/employees",
       "fail-to-deliver": "/statistics/fail-to-deliver",
     };
@@ -23,6 +24,7 @@
       const parts = $page?.url?.pathname.split("/");
       const sectionMap = {
         "market-cap": "market-cap",
+        "price-reaction": "price-reaction",
         employees: "employees",
         "fail-to-deliver": "fail-to-deliver",
       };
@@ -66,6 +68,16 @@
             >
               Market Cap
             </a>
+            <a
+              href={`/stocks/${$stockTicker}/statistics/price-reaction`}
+              on:click={() => changeSubSection("price-reaction")}
+              class="p-2 px-5 cursor-pointer {displaySubSection ===
+              'price-reaction'
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+            >
+              Price Reaction
+            </a>
             <a
               href={`/stocks/${$stockTicker}/statistics/employees`}
               on:click={() => changeSubSection("employees")}

src/routes/stocks/[tickerID]/statistics/price-reaction/+page.server.ts

@@ -1,13 +1,13 @@
 export const load = async ({ locals, params }) => {
-
-   const getSimilarStocks = async () => {
     const { apiKey, apiURL } = locals;
+
+  const getData = async () => {
     const postData = {
       ticker: params.tickerID,
     };
 
     // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/similar-stocks", {
+    const response = await fetch(apiURL + "/price-action-earnings", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -20,8 +20,10 @@ export const load = async ({ locals, params }) => {
     return output;
   };
 
+
+
   // Make sure to return a promise
   return {
-    getSimilarStocks: await getSimilarStocks(),
+    getData: await getData(),
   };
 };

src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+  } from "$lib/store";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+
+  let rawData = data?.getData || [];
+
+  function checkTime(timeString) {
+    const [hours, minutes, seconds] = timeString.split(":").map(Number);
+
+    // Convert the time to total seconds for easy comparison
+    const totalSeconds = hours * 3600 + minutes * 60 + seconds;
+
+    // Define the reference times in seconds
+    const amcStart = 16 * 3600; // 16:00:00
+    const bmcEnd = 9 * 3600 + 30 * 60; // 9:30:00
+
+    if (totalSeconds >= amcStart) {
+      return "AMC";
+    } else if (totalSeconds < bmcEnd) {
+      return "BMC";
+    } else {
+      return "None"; // Optional: if the time is in between
+    }
+  }
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Value-at-Risk Stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Historical Value-at-Risk of ${$stockTicker}.`}
+  />
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Value-at-Risk · Stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Historical Value-at-Risk of ${$stockTicker}.`}
+  />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Value-at-Risk · Stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Historical Value-at-Risk of ${$stockTicker}.`}
+  />
+</svelte:head>
+
+<section
+  class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
+>
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <main class="w-full">
+        <div class="sm:pl-7 sm:pt-7 sm:pb-7 m-auto mt-2 sm:mt-0">
+          <div class="mb-3">
+            <h1 class="text-xl sm:text-2xl text-white font-bold">
+              Price Reaction to Earnings Reports
+            </h1>
+          </div>
+
+          {#if rawData?.length !== 0}
+            <div class="mb-10 w-full">
+              <Infobox
+                text="This table provides an overview of how a stock's price historically reacted around earnings reports. It displays key metrics like price changes over specific timeframes and Relative Strength Index (RSI)."
+              />
+            </div>
+            <div class="w-full overflow-x-auto">
+              <table
+                class="table-fixed leading-3 border-separate border-spacing-0 font-sans tabular-nums text-white w-full"
+              >
+                <thead
+                  ><tr class="bg-inherit text-[#c3c6d0]"
+                    ><th
+                      class="w-44 whitespace-nowrap font-normal h-5 text-left px-1"
+                      >Report Date</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >-3 Days</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >-2 Days</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >-1 Day</th
+                    ><th class="px-0 w-1 whitespace-nowrap font-normal h-5 p-0"
+                    ></th><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 text-violet-300 font-semibold whitespace-nowrap font-normal h-5 text-right p-0"
+                      >Open</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 text-violet-300 font-semibold whitespace-nowrap font-normal h-5 text-right p-0"
+                      >High</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 text-violet-300 font-semibold whitespace-nowrap font-normal h-5 text-right p-0"
+                      >Low</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 text-violet-300 font-semibold whitespace-nowrap font-normal h-5 text-right p-0"
+                      >Close</th
+                    ><th class="px-0 w-1 whitespace-nowrap font-normal h-5 p-0"
+                    ></th><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >+1 Day</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >+2 Days</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >+3 Days</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >+1 Week</th
+                    ><th
+                      class="px-4 last:pr-11 w-20 last:w-24.5 whitespace-nowrap font-normal h-5 text-right p-0"
+                      >-1 Week</th
+                    ></tr
+                  ></thead
+                >
+                {#each rawData as item, index}
+                  <tbody class="">
+                    <tr class="group"
+                      ><td
+                        class="whitespace-nowrap border-l border-t border-primary py-0.5 rounded-tl-md px-1"
+                        ><div
+                          class="flex flex-col items-start text-white font-medium w-full"
+                        >
+                          <div
+                            class="pr-0.5 mt-2 flex flex-row items-center w-full text-sm"
+                          >
+                            <div class="">
+                              {item?.date?.length !== undefined
+                                ? new Date(item?.date)?.toLocaleString(
+                                    "en-US",
+                                    {
+                                      month: "short",
+                                      day: "numeric",
+                                      year: "numeric",
+                                      daySuffix: "2-digit",
+                                    },
+                                  )
+                                : "n/a"}
+                              ({item?.quarter})
+                            </div>
+                            <div class="ml-1 text-end">
+                              {checkTime(item?.time)}
+                            </div>
+                          </div>
+
+                          <div class="text-[#c3c6d0] text-xs -mt-2 invisible">
+                            {item?.quarter}
+                            {item?.year}
+                          </div>
+                        </div></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t border-l px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.backward_2_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.backward_1_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t border-r rounded-tr-md px-4 last:pr-11 w-17 last:w-24.5 border-r px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.forward_0_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 px-4 last:pr-11 w-17 last:w-24.5 px-1"
+                      ></td><td
+                        class="border-primary px-3.5 py-0.5 border-t border-l {index ===
+                        0
+                          ? 'rounded-tl-md border-t-violet-500'
+                          : ''} px-4 last:pr-11 w-17 last:w-24.5 border-l border-l-violet-500 px-1 text-right"
+                        ><span class="text-white">{item?.open}</span></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t {index ===
+                        0
+                          ? 'border-t-violet-500'
+                          : ''} px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white">{item?.high}</span></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t {index ===
+                        0
+                          ? 'border-t-violet-500'
+                          : ''} px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white">{item?.low?.toFixed(2)}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t {index ===
+                        0
+                          ? 'rounded-tr-md border-t-violet-500'
+                          : ''} border-r border-r-violet-500 px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.close?.toFixed(2)}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 px-4 last:pr-11 w-17 last:w-24.5 px-1"
+                      ></td><td
+                        class="border-primary px-3.5 py-0.5 border-t border-l rounded-tl-md px-4 last:pr-11 w-17 last:w-24.5 border-l px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.forward_2_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.forward_3_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.forward_4_days_close}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t border-l px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.forward_6_days_close?.toFixed(2)}</span
+                        ></td
+                      ><td
+                        class="border-primary px-3.5 py-0.5 border-t border-r px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
+                        ><span class="text-white"
+                          >{item?.backward_4_days_close?.toFixed(2)}</span
+                        ></td
+                      ></tr
+                    >
+                    <tr class="group"
+                      ><td
+                        class="border-l border-primary pl-1 text-[#c3c6d0] text-sm px-1"
+                        ><div class="flex w-full justify-between">
+                          <div class="flex items-center">
+                            <div class="mr-1">RSI</div>
+                            <div
+                              class="leading-3 w-full whitespace-nowrap rounded-[3px] p-1 font-medium bg-secondary text-white"
+                            >
+                              {item?.rsi}
+                            </div>
+                          </div>
+
+                          <div>{$stockTicker} %</div>
+                        </div></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.backward_2_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.backward_2_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.backward_1_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.backward_1_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.backward_1_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.backward_1_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                      ></td><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l border-l-violet-500 px-1 text-right"
+                        ><div
+                          class="w-full whitespace-nowrap rounded-sm badge text-white text-[1rem] font-medium {item?.open_change_percent >=
+                          0
+                            ? "bg-positive bg-opacity-[0.5] before:content-['+'] "
+                            : 'bg-negative bg-opacity-[0.6]'}"
+                        >
+                          {item?.open_change_percent?.toFixed(2)}%
+                        </div></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                        ><div
+                          class="w-full whitespace-nowrap rounded-sm badge text-white text-[1rem] font-medium {item?.high_change_percent >=
+                          0
+                            ? "bg-positive bg-opacity-[0.5] before:content-['+'] "
+                            : 'bg-negative bg-opacity-[0.6]'}"
+                        >
+                          {item?.high_change_percent?.toFixed(2)}%
+                        </div></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                        ><div
+                          class="w-full whitespace-nowrap rounded-sm badge text-white text-[1rem] font-medium {item?.low_change_percent >=
+                          0
+                            ? "bg-positive bg-opacity-[0.5] before:content-['+'] "
+                            : 'bg-negative bg-opacity-[0.6]'}"
+                        >
+                          {item?.low_change_percent?.toFixed(2)}%
+                        </div></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-r border-r-violet-500 px-1 text-right"
+                        ><div
+                          class="w-full whitespace-nowrap rounded-sm badge text-white text-[1rem] font-medium {item?.close_change_percent >=
+                          0
+                            ? "bg-positive bg-opacity-[0.5] before:content-['+'] "
+                            : 'bg-negative bg-opacity-[0.6]'}"
+                        >
+                          {item?.close_change_percent?.toFixed(2)}%
+                        </div></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                      ></td><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.forward_2_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.forward_2_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.forward_3_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.forward_3_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.forward_4_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.forward_4_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.forward_6_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.forward_6_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ><td
+                        class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-r px-1 text-right"
+                        ><span
+                          class="w-full items-baseline justify-end whitespace-nowrap {item?.backward_4_days_change_percent >=
+                          0
+                            ? "text-positive before:content-['+']"
+                            : 'text-negative'}"
+                          >{item?.backward_4_days_change_percent}%<span
+                            class="w-0 text-center"
+                          ></span></span
+                        ></td
+                      ></tr
+                    >
+                  </tbody>
+                {/each}
+                <tfoot
+                  ><tr
+                    ><td
+                      colspan="15"
+                      class="pt-3 text-[#c3c6d0] px-1 leading-tight text-sm"
+                      >Daily change and RSI 14 are based on the report date for
+                      BMO releases and the following day for AMC releases.</td
+                    ></tr
+                  ></tfoot
+                >
+              </table>
+            </div>
+          {:else}
+            <Infobox text="No data available" />
+          {/if}
+        </div>
+      </main>
+    </div>
+  </div>
+</section>

src/routes/stocks/[tickerID]/statistics/value-at-risk/+layout.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-  import { abbreviateNumber } from "$lib/utils";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-
-  export let data;
-  const similarStocks = data?.getSimilarStocks?.sort((a, b) => b?.var - a?.var);
-</script>
-
-<section class="w-full overflow-hidden">
-  <div class="w-full overflow-hidden m-auto">
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-      <div
-        class="relative flex justify-center items-start overflow-hidden w-full"
-      >
-        <main class="w-full lg:w-3/4">
-          <slot />
-        </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href="/pricing"
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          {#if similarStocks?.length > 0}
-            <div
-              class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
-              <table class="table table-sm table-compact w-full text-white">
-                <thead class="text-white"
-                  ><tr
-                    ><th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-left"
-                      >Company</th
-                    >
-                    <th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-right"
-                      >Value-at-Risk</th
-                    ></tr
-                  ></thead
-                >
-                <tbody>
-                  {#each similarStocks?.slice(0, 8) as item, index}
-                    <tr
-                      class="border-gray-600 text-[1rem] {index !==
-                      similarStocks?.slice(0, 8).length - 1
-                        ? 'border-b'
-                        : ''}"
-                      ><td class="text-left text-[1rem]"
-                        ><a
-                          href={`/stocks/${item?.symbol}`}
-                          class="sm:hover:text-white text-blue-400"
-                          >{item?.symbol}</a
-                        ></td
-                      >
-                      <td class="text-right cursor-normal text-[1rem]"
-                        >{abbreviateNumber(item?.var) + "%"}</td
-                      >
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-              <a
-                href="/list/most-ftd-shares"
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
-              >
-                Fail-to-Deliver Ranks
-              </a>
-            </div>
-          {/if}
-        </aside>
-      </div>
-    </div>
-  </div>
-</section>

src/routes/stocks/[tickerID]/statistics/value-at-risk/+page.server.ts

@@ -1,46 +0,0 @@
-export const load = async ({ locals, params }) => {
-    const { apiKey, apiURL } = locals;
-
-  const getVaR = async () => {
-    const postData = {
-      ticker: params.tickerID,
-    };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/value-at-risk", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-    return output;
-  };
-
-  
-    const getHistoricalPrice = async () => {
-     const postData = { ticker: params.tickerID, timePeriod: "max" };
-    const response = await fetch(apiURL + "/historical-price", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-API-KEY": apiKey,
-    },
-    body: JSON.stringify(postData),
-  });
-
-    const output = await response.json();
-    return output;
-  }; 
-
-
-
-  // Make sure to return a promise
-  return {
-    getVaR: await getVaR(),
-    getHistoricalPrice: await getHistoricalPrice(),
-  };
-};

src/routes/stocks/[tickerID]/statistics/value-at-risk/+page.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-  import {
-    numberOfUnreadNotification,
-    displayCompanyName,
-    stockTicker,
-  } from "$lib/store";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import VaR from "$lib/components/VaR.svelte";
-
-  export let data;
-
-  let rawData = data?.getVaR || {};
-  if (!rawData?.history || !data?.getHistoricalPrice) {
-    console.error(
-      "Missing required data: rawData.history or data.getHistoricalPrice is undefined.",
-    );
-  } else {
-    for (let i = 0; i < rawData.history.length; i++) {
-      const entry = rawData.history[i];
-      const entryMonth = entry?.date; // "YYYY-MM" format
-
-      let matchingData = null;
-
-      // Find the first price at the beginning of the month
-      for (let j = 0; j < data.getHistoricalPrice.length; j++) {
-        const priceData = data.getHistoricalPrice[j];
-
-        // Extract year and month from the `time` field
-        const priceDate = priceData?.time?.slice(0, 7); // "YYYY-MM" format
-        if (priceDate === entryMonth) {
-          matchingData = priceData;
-          break; // Use the first matching entry
-        }
-      }
-
-      // Add the 'close' price to the entry if matching data is found
-      if (matchingData) {
-        entry.price = matchingData.close;
-      } else {
-        console.warn(`No matching data found for month: ${entry?.date}`);
-      }
-    }
-  }
-  console.log(rawData);
-</script>
-
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Value-at-Risk Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Historical Value-at-Risk of ${$stockTicker}.`}
-  />
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Value-at-Risk · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Historical Value-at-Risk of ${$stockTicker}.`}
-  />
-  <meta property="og:type" content="website" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Value-at-Risk · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Historical Value-at-Risk of ${$stockTicker}.`}
-  />
-</svelte:head>
-
-<section
-  class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
->
-  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
-    <div
-      class="w-full relative flex justify-center items-center overflow-hidden"
-    >
-      <main class="w-full">
-        <div class="sm:p-7 m-auto mt-2 sm:mt-0">
-          {#if rawData?.length !== 0}
-            <div class="grid grid-cols-1 gap-2">
-              <VaR {data} {rawData} />
-            </div>
-          {:else}
-            <Infobox text="No data available" />
-          {/if}
-        </div>
-      </main>
-    </div>
-  </div>
-</section>

tailwind.config.cjs

@@ -30,6 +30,9 @@ module.exports = {
         odd: "#121217",
         table: "#18181D",
         default: "#09090B",
+        positive: "#00FC50",
+        negative: "#FF2F1F",
+        neutral: "#FFA838",
         destructive: {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",