update stock list

src/lib/components/Table/Table.svelte

@@ -160,6 +160,8 @@
     },
     { name: "Change OI", rule: "changeOI", type: "decimalSign" },
     { name: "Total OI", rule: "totalOI", type: "int" },
+    { name: "IV Rank", rule: "ivRank", type: "float" },
+    { name: "Total Prem", rule: "totalPrem", type: "int" },
   ];
 
   allRows = [...allRows, ...specificRows];

src/routes/+page.svelte

@@ -562,11 +562,6 @@
                     >AI Analyst report
                   </Card.Title>
                   {#if analystReport?.date}
-                    <label
-                      class="text-black bg-[#fff] inline-block ml-3 mt-1 font-semibold not-italic text-xs rounded px-2 py-0.5"
-                      >New</label
-                    >
-
                     <label
                       class="hidden sm:inline-block text-white text-sm italic ml-auto"
                       >Updated {analystReport?.date}</label

src/routes/list/+layout.svelte

@@ -210,6 +210,18 @@
       title: "Highest OI Change",
       link: "/list/highest-open-interest-change",
     },
+    {
+      title: "Highest OI",
+      link: "/list/highest-open-interest",
+    },
+    {
+      title: "Highest IV Rank",
+      link: "/list/highest-option-iv-rank",
+    },
+    {
+      title: "Highest Option Premium",
+      link: "/list/highest-option-premium",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];
@@ -290,14 +302,14 @@
         {/each}
       </div>
 
-      <div class="border-b-[2px] w-full mb-7" />
+      <div class="border-b-[2px] w-full mb-4" />
 
       <div class="flex justify-center w-full m-auto overflow-hidden">
         <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 -mt-4">
+        <aside class="hidden lg:block relative fixed w-1/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"

src/routes/list/+page.svelte

@@ -33,13 +33,6 @@
         >U.S. Companies With The Most FTD Shares</a
       >
     </li>
-    <li>
-      <a
-        class="text-blue-400 sm:hover:text-white"
-        href="/list/highest-open-interest-change"
-        >U.S. Companies with Highest OI Change</a
-      >
-    </li>
   </ul>
 </div>
 
@@ -139,8 +132,40 @@
 
 <!--End Index Group-->
 
-<!--Start Other Lists-->
+<div class="text-white">
+  <h2 class="mb-2 text-xl font-bold pt-10">Options Lists</h2>
+  <ul
+    class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
+  >
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/highest-open-interest">Companies with Highest OI</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/highest-open-interest-change"
+        >Companies with Highest OI Change</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/highest-option-iv-rank">Companies with Highest IV Rank</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/highest-option-premium">Companies with Highest Premium</a
+      >
+    </li>
+  </ul>
+</div>
 
+<!--Start Other Lists-->
 <div class="text-white">
   <h2 class="mb-2 text-xl font-bold pt-10">Other Lists</h2>
   <ul

src/routes/list/highest-open-interest/+page.server.ts

@@ -0,0 +1,25 @@
+export const load = async ({ locals }) => {
+
+  const getStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'highest-open-interest' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      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 {
+    getStocks: await getStocks(),
+  };
+};

src/routes/list/highest-open-interest/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Total OI", rule: "totalOI" },
+    { name: "Change OI", rule: "changeOI" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "changeOI",
+    "totalOI",
+  ]);
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="A list of stocks with the highest open interest (OI). Open interest represents the total number of outstanding options contracts available for trading."
+  />
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
+</section>

src/routes/list/highest-option-iv-rank/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+
+  const getStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'highest-option-iv-rank' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      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 {
+    getStocks: await getStocks(),
+  };
+};

src/routes/list/highest-option-iv-rank/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Total OI", rule: "totalOI" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "ivRank",
+    "totalOI",
+  ]);
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="A list of stocks with the highest Implied Volatility (IV) Rank and a minimum of 1 million open interest (OI). IV Rank measures a stock's current implied volatility compared to its range over a specific period, helping identify potential opportunities in the options market."
+  />
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
+</section>

src/routes/list/highest-option-premium/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+
+  const getStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'highest-option-premium' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      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 {
+    getStocks: await getStocks(),
+  };
+};

src/routes/list/highest-option-premium/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Total Prem", rule: "totalPrem" },
+
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "ivRank",
+    "totalPrem",
+  ]);
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="A list of stocks with the highest Implied Volatility (IV) Rank and a minimum of 1 million open interest (OI). IV Rank measures a stock's current implied volatility compared to its range over a specific period, helping identify potential opportunities in the options market."
+  />
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
+</section>

src/routes/list/top-rated-dividend-stocks/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   const defaultList = [
@@ -12,24 +12,12 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    This list highlights top-rated dividend stocks, each with an average "buy"
-    or "strong buy" rating from at least 10 analysts. Every stock offers a
+  <Infobox
+    text="This list highlights top-rated dividend stocks, each with an average 'buy'
+    or 'strong buy' rating from at least 10 analysts. Every stock offers a
     dividend yield of at least 2% and a payout ratio below 60%, indicating
-    sustainable dividends.
-  </div>
+    sustainable dividends."
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getDividendStocks} {defaultList} />