add contract lookup component

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

@@ -12,6 +12,7 @@
       overview: "/options",
       "hottest-contracts": "/options/hottest-contracts",
       "unusual-activity": "/options/unusual-activity",
+      "contract-lookup": "/options/contract-lookup",
       volatility: "/options/volatility",
       gex: "/options/gex",
       dex: "/options/dex",
@@ -34,6 +35,7 @@
         overview: "overview",
         "hottest-contracts": "hottest-contracts",
         "unusual-activity": "unusual-activity",
+        "contract-lookup": "contract-lookup",
         volatility: "volatility",
         gex: "gex",
         dex: "dex",
@@ -72,6 +74,16 @@
               >
                 Overview
               </a>
+              <a
+                href={`/stocks/${$stockTicker}/options/contract-lookup`}
+                on:click={() => changeSubSection("contract-lookup")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'contract-lookup'
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
+              >
+                Contract Lookup
+              </a>
               <a
                 href={`/stocks/${$stockTicker}/options/unusual-activity`}
                 on:click={() => changeSubSection("unusual-activity")}

src/routes/stocks/[tickerID]/options/contract-lookup/+page.server.ts

@@ -0,0 +1,51 @@
+
+
+export const load = async ({ locals, params }) => {
+  const { apiKey, apiURL, user } = locals;
+
+  const getData = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    const response = await fetch(apiURL + "/contract-lookup-summary", {
+      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 {
+    getData: await getData(),
+    getHistoricalPrice: await getHistoricalPrice(),
+  };
+};
+
+

src/routes/stocks/[tickerID]/options/contract-lookup/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { stockTicker, displayCompanyName } from "$lib/store";
+
+  import SEO from "$lib/components/SEO.svelte";
+  import ContractLookup from "$lib/components/Options/ContractLookup.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+</script>
+
+<SEO
+  title={`${$displayCompanyName} (${$stockTicker}) | Explore the Hottest Options Contracts`}
+  description={`Analyze historical volume, open interest, and trends in option chains for ${$displayCompanyName} (${$stockTicker}). Discover actionable insights for trading decisions.`}
+/>
+
+<section class="w-full overflow-hidden min-h-screen pb-40">
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      {#if Object?.keys(data?.getData)?.length > 0}
+        <ContractLookup {data} ticker={$stockTicker} />
+      {:else}
+        <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+          <div class="mt-2">
+            <Infobox text="No data is available" />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</section>