From c77cced136a95358b784597fc493c2ad491116fe Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 1 Jan 2025 11:39:33 +0100
Subject: [PATCH] ui fix

---
 .../DarkPool/HistoricalVolume.svelte          |  20 +-
 src/lib/components/FailToDeliver.svelte       |  18 +-
 .../options/hottest-contracts/+page.server.ts |   5 +-
 .../options/hottest-contracts/+page.svelte    | 630 +++++++++---------
 4 files changed, 351 insertions(+), 322 deletions(-)

diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index 8339330e..124cebb4 100644
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@@ -234,11 +234,17 @@
           Latest Information
         </h2>
 
-        <div class="flex justify-start items-center w-full m-auto">
-          <table class="w-full bg-table border border-gray-800">
+        <div
+          class="flex justify-start items-center w-full m-auto overflow-x-auto"
+        >
+          <table
+            class="w-full bg-table table table-sm table-compact border border-gray-800"
+          >
             <tbody>
               <tr class="border-y border-gray-800 odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Date</span>
                 </td>
                 <td
@@ -248,7 +254,9 @@
                 </td>
               </tr>
               <tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Total Volume</span>
                 </td>
                 <td
@@ -258,7 +266,9 @@
                 </td>
               </tr>
               <tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Avg. Short % of Volume</span>
                 </td>
                 <td
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 02a71e7b..c1ca4299 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -261,31 +261,37 @@
           <table class="w-full bg-table border border-gray-800">
             <tbody>
               <tr class="border-y border-gray-800 odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Date</span>
                 </td>
                 <td
-                  class="px-[5px] py-1.5 text-right whitespace-nowrap font-medium xs:px-2.5 xs:py-2"
+                  class="px-[5px] py-1.5 text-right whitespace-nowrap font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
                 >
                   {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
                 </td>
               </tr>
               <tr class="border-y border-gray-800 odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Price Range</span>
                 </td>
                 <td
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
+                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
                 >
                   {lowestPrice + "-" + highestPrice}
                 </td>
               </tr>
               <tr class="border-y border-gray-800 odd:bg-odd">
-                <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
+                <td
+                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                >
                   <span>Latest FTD</span>
                 </td>
                 <td
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
+                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
                 >
                   {abbreviateNumber(rawData?.slice(-1)?.at(0)?.failToDeliver)}
                 </td>
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts
index 3f224fca..59e5fb74 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts
@@ -1,7 +1,7 @@
 
 
 export const load = async ({ locals, params }) => {
-  const { apiKey, apiURL } = locals;
+  const { apiKey, apiURL, user } = locals;
 
   const getData = async () => {
     const postData = {
@@ -17,7 +17,8 @@ export const load = async ({ locals, params }) => {
       body: JSON.stringify(postData),
     });
 
-    const output = await response.json();
+    let output = await response.json();
+    output = user?.tier !== "Pro" ? output?.slice(0, 3) : output;
 
     return output;
   };
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index 5ecb68d1..76eeed49 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { abbreviateNumberWithColor } from "$lib/utils";
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
-
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   export let data;
 
   let volumeList = data?.getData;
@@ -24,7 +24,9 @@
   }
 </script>
 
-<section class="w-full bg-default overflow-hidden text-white min-h-screen">
+<section
+  class="w-full bg-default overflow-hidden text-white 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"
@@ -35,333 +37,343 @@
         >
           Hottest Contracts (Highest Volume)
         </h2>
+        <div class="w-full overflow-x-scroll text-white">
+          <table
+            class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+          >
+            <thead class="bg-default">
+              <tr class="">
+                <td class="text-white font-semibold text-sm text-center"
+                  >Chain</td
+                >
 
-        <table
-          class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
-        >
-          <thead class="bg-default">
-            <tr class="">
-              <td class="text-white font-semibold text-sm text-center">Chain</td
-              >
-
-              <td class="text-white font-semibold text-sm text-end">Last</td>
-              <td class="text-white font-semibold text-sm text-end">Low-High</td
-              >
-              <td class="text-white font-semibold text-sm text-end">Volume</td>
-              <td class="text-white font-semibold text-sm text-end">OI</td>
-              <td class="text-white font-semibold text-sm text-end"
-                >OI Change</td
-              >
-              <td class="text-white font-semibold text-sm text-end"
-                >Bid/Ask Vol</td
-              >
-              <td class="text-white font-semibold text-sm text-end"
-                >Total Prem</td
-              >
-            </tr>
-          </thead>
-          <tbody>
-            {#each volumeList as item, index}
-              <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
-                  1 ===
-                  volumeList?.slice(0, 3)?.length && data?.user?.tier !== 'Pro'
-                  ? 'opacity-[0.1]'
-                  : ''}"
-              >
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">Last</td>
+                <td class="text-white font-semibold text-sm text-end"
+                  >Low-High</td
                 >
-                  {item?.strike_price}
-                  {item?.option_type === "C" ? "Call" : "Put"}
-                  {" " +
-                    item?.date_expiration +
-                    " " +
-                    `(${daysLeft(item?.date_expiration)})`}
-                </td>
-
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">Volume</td
                 >
-                  {item?.last_price}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">OI</td>
+                <td class="text-white font-semibold text-sm text-end"
+                  >OI Change</td
                 >
-                  {item?.low_price}-{item?.high_price}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end"
+                  >Bid/Ask Vol</td
                 >
-                  {item?.volume?.toLocaleString("en-US")}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end"
+                  >Total Prem</td
                 >
-                  {item?.open_interest?.toLocaleString("en-US")}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                >
-                  {#if item?.open_interest_change >= 0}
-                    <span class="text-[#00FC50]"
-                      >+{item?.open_interest_change?.toLocaleString(
-                        "en-US",
-                      )}</span
-                    >
-                  {:else}
-                    <span class="text-[#FF2F1F]"
-                      >{item?.open_interest_change?.toLocaleString(
-                        "en-US",
-                      )}</span
-                    >
-                  {/if}
-                </td>
-                <td class="text-sm sm:text-[1rem] text-end">
-                  <HoverCard.Root>
-                    <HoverCard.Trigger
-                      class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-                    >
-                      <div class="flex items-center justify-end">
-                        <!-- Bar Container -->
-                        <div
-                          class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                        >
-                          <!-- Bearish -->
-                          <div
-                            class="bg-red-500 h-full"
-                            style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Neutral -->
-                          <div
-                            class="bg-gray-300 h-full"
-                            style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Bullish -->
-                          <div
-                            class="bg-green-500 h-full"
-                            style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-                        </div>
-                      </div>
-                    </HoverCard.Trigger>
-                    <HoverCard.Content
-                      class="w-auto bg-secondary border border-gray-600"
-                    >
-                      <div class="flex justify-between space-x-4">
-                        <div
-                          class="space-y-1 flex flex-col items-start text-white"
-                        >
-                          <div>
-                            Bid Vol: {@html abbreviateNumberWithColor(
-                              item?.bid_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                          <div>
-                            Mid Vol: {@html abbreviateNumberWithColor(
-                              item?.mid_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                          <div>
-                            Ask Vol: {@html abbreviateNumberWithColor(
-                              item?.ask_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </HoverCard.Content>
-                  </HoverCard.Root>
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                >
-                  {@html abbreviateNumberWithColor(
-                    item?.total_premium,
-                    false,
-                    true,
-                  )}
-                </td>
               </tr>
-            {/each}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {#each volumeList as item, index}
+                <tr
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
+                    1 ===
+                    volumeList?.slice(0, 3)?.length &&
+                  data?.user?.tier !== 'Pro'
+                    ? 'opacity-[0.1]'
+                    : ''}"
+                >
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                  >
+                    {item?.strike_price}
+                    {item?.option_type === "C" ? "Call" : "Put"}
+                    {" " +
+                      item?.date_expiration +
+                      " " +
+                      `(${daysLeft(item?.date_expiration)})`}
+                  </td>
 
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.last_price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.low_price}-{item?.high_price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.volume?.toLocaleString("en-US")}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.open_interest?.toLocaleString("en-US")}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {#if item?.open_interest_change >= 0}
+                      <span class="text-[#00FC50]"
+                        >+{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {:else}
+                      <span class="text-[#FF2F1F]"
+                        >{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {/if}
+                  </td>
+                  <td class="text-sm sm:text-[1rem] text-end">
+                    <HoverCard.Root>
+                      <HoverCard.Trigger
+                        class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
+                      >
+                        <div class="flex items-center justify-end">
+                          <!-- Bar Container -->
+                          <div
+                            class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
+                          >
+                            <!-- Bearish -->
+                            <div
+                              class="bg-red-500 h-full"
+                              style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+
+                            <!-- Neutral -->
+                            <div
+                              class="bg-gray-300 h-full"
+                              style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+
+                            <!-- Bullish -->
+                            <div
+                              class="bg-green-500 h-full"
+                              style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+                          </div>
+                        </div>
+                      </HoverCard.Trigger>
+                      <HoverCard.Content
+                        class="w-auto bg-secondary border border-gray-600"
+                      >
+                        <div class="flex justify-between space-x-4">
+                          <div
+                            class="space-y-1 flex flex-col items-start text-white"
+                          >
+                            <div>
+                              Bid Vol: {@html abbreviateNumberWithColor(
+                                item?.bid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Mid Vol: {@html abbreviateNumberWithColor(
+                                item?.mid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Ask Vol: {@html abbreviateNumberWithColor(
+                                item?.ask_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </HoverCard.Content>
+                    </HoverCard.Root>
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {@html abbreviateNumberWithColor(
+                      item?.total_premium,
+                      false,
+                      true,
+                    )}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
         <h2
           class="mt-10 flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
         >
           Highest OI Contracts
         </h2>
+        <div class="w-full overflow-x-scroll text-white">
+          <table
+            class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+          >
+            <thead class="bg-default">
+              <tr class="">
+                <td class="text-white font-semibold text-sm text-center"
+                  >Chain</td
+                >
+                <td class="text-white font-semibold text-sm text-end">Strike</td
+                >
 
-        <table
-          class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
-        >
-          <thead class="bg-default">
-            <tr class="">
-              <td class="text-white font-semibold text-sm text-center">Chain</td
-              >
-              <td class="text-white font-semibold text-sm text-end">Strike</td>
-
-              <td class="text-white font-semibold text-sm text-end">Last</td>
-              <td class="text-white font-semibold text-sm text-end">Low-High</td
-              >
-              <td class="text-white font-semibold text-sm text-end">Volume</td>
-              <td class="text-white font-semibold text-sm text-end">OI</td>
-              <td class="text-white font-semibold text-sm text-end"
-                >OI Change</td
-              >
-              <td class="text-white font-semibold text-sm text-end"
-                >Bid/Ask Vol</td
-              >
-              <td class="text-white font-semibold text-sm text-end"
-                >Total Prem</td
-              >
-            </tr>
-          </thead>
-          <tbody>
-            {#each openInterestList as item, index}
-              <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
-                  1 ===
-                  openInterestList?.slice(0, 3)?.length &&
-                data?.user?.tier !== 'Pro'
-                  ? 'opacity-[0.1]'
-                  : ''}"
-              >
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">Last</td>
+                <td class="text-white font-semibold text-sm text-end"
+                  >Low-High</td
                 >
-                  {item?.option_type === "C" ? "Call" : "Put"}
-                  {" " +
-                    item?.date_expiration +
-                    " " +
-                    `(${daysLeft(item?.date_expiration)})`}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">Volume</td
                 >
-                  {item?.strike_price}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end">OI</td>
+                <td class="text-white font-semibold text-sm text-end"
+                  >OI Change</td
                 >
-                  {item?.last_price}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end"
+                  >Bid/Ask Vol</td
                 >
-                  {item?.low_price}-{item?.high_price}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                <td class="text-white font-semibold text-sm text-end"
+                  >Total Prem</td
                 >
-                  {item?.volume?.toLocaleString("en-US")}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                >
-                  {item?.open_interest?.toLocaleString("en-US")}
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                >
-                  {#if item?.open_interest_change >= 0}
-                    <span class="text-[#00FC50]"
-                      >+{item?.open_interest_change?.toLocaleString(
-                        "en-US",
-                      )}</span
-                    >
-                  {:else}
-                    <span class="text-[#FF2F1F]"
-                      >{item?.open_interest_change?.toLocaleString(
-                        "en-US",
-                      )}</span
-                    >
-                  {/if}
-                </td>
-                <td class="text-sm sm:text-[1rem] text-end">
-                  <HoverCard.Root>
-                    <HoverCard.Trigger
-                      class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-                    >
-                      <div class="flex items-center justify-end">
-                        <!-- Bar Container -->
-                        <div
-                          class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                        >
-                          <!-- Bearish -->
-                          <div
-                            class="bg-red-500 h-full"
-                            style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Neutral -->
-                          <div
-                            class="bg-gray-300 h-full"
-                            style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Bullish -->
-                          <div
-                            class="bg-green-500 h-full"
-                            style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-                        </div>
-                      </div>
-                    </HoverCard.Trigger>
-                    <HoverCard.Content
-                      class="w-auto bg-secondary border border-gray-600"
-                    >
-                      <div class="flex justify-between space-x-4">
-                        <div
-                          class="space-y-1 flex flex-col items-start text-white"
-                        >
-                          <div>
-                            Bid Vol: {@html abbreviateNumberWithColor(
-                              item?.bid_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                          <div>
-                            Mid Vol: {@html abbreviateNumberWithColor(
-                              item?.mid_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                          <div>
-                            Ask Vol: {@html abbreviateNumberWithColor(
-                              item?.ask_volume,
-                              false,
-                              true,
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </HoverCard.Content>
-                  </HoverCard.Root>
-                </td>
-                <td
-                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                >
-                  {@html abbreviateNumberWithColor(
-                    item?.total_premium,
-                    false,
-                    true,
-                  )}
-                </td>
               </tr>
-            {/each}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {#each openInterestList as item, index}
+                <tr
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
+                    1 ===
+                    openInterestList?.slice(0, 3)?.length &&
+                  data?.user?.tier !== 'Pro'
+                    ? 'opacity-[0.1]'
+                    : ''}"
+                >
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                  >
+                    {item?.option_type === "C" ? "Call" : "Put"}
+                    {" " +
+                      item?.date_expiration +
+                      " " +
+                      `(${daysLeft(item?.date_expiration)})`}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.strike_price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.last_price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.low_price}-{item?.high_price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.volume?.toLocaleString("en-US")}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.open_interest?.toLocaleString("en-US")}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {#if item?.open_interest_change >= 0}
+                      <span class="text-[#00FC50]"
+                        >+{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {:else}
+                      <span class="text-[#FF2F1F]"
+                        >{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {/if}
+                  </td>
+                  <td class="text-sm sm:text-[1rem] text-end">
+                    <HoverCard.Root>
+                      <HoverCard.Trigger
+                        class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
+                      >
+                        <div class="flex items-center justify-end">
+                          <!-- Bar Container -->
+                          <div
+                            class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
+                          >
+                            <!-- Bearish -->
+                            <div
+                              class="bg-red-500 h-full"
+                              style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+
+                            <!-- Neutral -->
+                            <div
+                              class="bg-gray-300 h-full"
+                              style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+
+                            <!-- Bullish -->
+                            <div
+                              class="bg-green-500 h-full"
+                              style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
+                            ></div>
+                          </div>
+                        </div>
+                      </HoverCard.Trigger>
+                      <HoverCard.Content
+                        class="w-auto bg-secondary border border-gray-600"
+                      >
+                        <div class="flex justify-between space-x-4">
+                          <div
+                            class="space-y-1 flex flex-col items-start text-white"
+                          >
+                            <div>
+                              Bid Vol: {@html abbreviateNumberWithColor(
+                                item?.bid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Mid Vol: {@html abbreviateNumberWithColor(
+                                item?.mid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Ask Vol: {@html abbreviateNumberWithColor(
+                                item?.ask_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </HoverCard.Content>
+                    </HoverCard.Root>
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {@html abbreviateNumberWithColor(
+                      item?.total_premium,
+                      false,
+                      true,
+                    )}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+        <UpgradeToPro {data} />
       </div>
     </div>
   </div>