update sitemaps && option page ui fixes

src/lib/components/DarkPool/HistoricalVolume.svelte

@@ -2,6 +2,8 @@
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+
   import highcharts from "$lib/highcharts.ts";
   import { goto } from "$app/navigation";
   import { mode } from "mode-watcher";
@@ -273,10 +275,41 @@
         </div>
       </div>
 
+      <div>
+        <div class="grow">
+          <div class="relative">
+            <!-- Apply the blur class to the chart -->
             <div
-        class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
+              class="{!['Pro']?.includes(data?.user?.tier)
+                ? 'blur-[3px]'
+                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
+            <!-- Overlay with "Upgrade to Pro" -->
+            {#if !["Pro"]?.includes(data?.user?.tier)}
+              <div
+                class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+              >
+                <a
+                  href="/pricing"
+                  class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                >
+                  <span>Upgrade to Pro</span>
+                  <svg
+                    class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
 
       <div
         class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark:border-gray-800 sm:pt-2 sm:pb-2"
@@ -351,10 +384,15 @@
             </tr>
           </thead>
           <tbody>
-            {#each tableList as item, index}
+            {#each data?.user?.tier === "Pro" ? tableList : tableList?.slice(0, 3) as item, index}
               <!-- row -->
               <tr
-                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                  1 ===
+                  tableList?.slice(0, 3)?.length &&
+                !['Pro']?.includes(data?.user?.tier)
+                  ? 'opacity-[0.1]'
+                  : ''}"
               >
                 <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                   {new Date(item?.date)?.toLocaleDateString("en-US", {
@@ -407,6 +445,7 @@
           </tbody>
         </table>
       </div>
+      <UpgradeToPro {data} display={true} />
     {/if}
   </main>
 </section>

src/lib/components/DarkPool/RealtimeTrade.svelte

@@ -213,7 +213,38 @@
   }
 </script>
 
+<div>
+  <div class="grow">
+    <div class="relative">
+      <!-- Apply the blur class to the chart -->
       <div
-  class="border border-gray-300 dark:border-gray-800 rounded w-full"
+        class="{!['Pro']?.includes(data?.user?.tier)
+          ? 'blur-[3px]'
+          : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
+      <!-- Overlay with "Upgrade to Pro" -->
+      {#if !["Pro"]?.includes(data?.user?.tier)}
+        <div
+          class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+        >
+          <a
+            href="/pricing"
+            class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+          >
+            <span>Upgrade to Pro</span>
+            <svg
+              class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="currentColor"
+                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+              /></svg
+            >
+          </a>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

src/lib/components/Options/ContractLookup.svelte

@@ -4,6 +4,8 @@
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   import Infobox from "$lib/components/Infobox.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+
   import { onMount } from "svelte";
 
   import highcharts from "$lib/highcharts.ts";
@@ -884,10 +886,41 @@
             {/each}
           </div>
           {#if config}
+            <div>
+              <div class="grow pt-5">
+                <div class="relative">
+                  <!-- Apply the blur class to the chart -->
                   <div
-              class="mt-2 border border-gray-300 dark:border-gray-800 rounded"
+                    class="{!['Pro']?.includes(data?.user?.tier)
+                      ? 'blur-[3px]'
+                      : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
                     use:highcharts={config}
                   ></div>
+                  <!-- Overlay with "Upgrade to Pro" -->
+                  {#if !["Pro"]?.includes(data?.user?.tier)}
+                    <div
+                      class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+                    >
+                      <a
+                        href="/pricing"
+                        class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                      >
+                        <span>Upgrade to Pro</span>
+                        <svg
+                          class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          ><path
+                            fill="currentColor"
+                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                          /></svg
+                        >
+                      </a>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            </div>
           {/if}
         </div>
 
@@ -914,10 +947,14 @@
                 </tr>
               </thead>
               <tbody>
-                {#each displayList as item}
-                  <!-- row -->
+                {#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index}
                   <tr
-                    class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                    class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                      1 ===
+                      displayList?.slice(0, 3)?.length &&
+                    !['Pro']?.includes(data?.user?.tier)
+                      ? 'opacity-[0.1]'
+                      : ''}"
                   >
                     <td
                       class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
@@ -995,6 +1032,7 @@
             </table>
           </div>
         {/if}
+        <UpgradeToPro {data} display={true} />
       </div>
     </div>
   </div>

src/lib/components/Options/GreekByExpiry.svelte

@@ -327,10 +327,41 @@
 
   <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
     {#if config !== null}
+      <div>
+        <div class="grow">
+          <div class="relative">
+            <!-- Apply the blur class to the chart -->
             <div
-        class=" border border-gray-300 dark:border-gray-800 rounded"
+              class="{!['Pro']?.includes(data?.user?.tier)
+                ? 'blur-[3px]'
+                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
+            <!-- Overlay with "Upgrade to Pro" -->
+            {#if !["Pro"]?.includes(data?.user?.tier)}
+              <div
+                class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+              >
+                <a
+                  href="/pricing"
+                  class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                >
+                  <span>Upgrade to Pro</span>
+                  <svg
+                    class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
     {/if}
   </div>
 

src/lib/components/Options/GreekByStrike.svelte

@@ -301,10 +301,41 @@
 
   <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
     {#if config !== null}
+      <div>
+        <div class="grow">
+          <div class="relative">
+            <!-- Apply the blur class to the chart -->
             <div
-        class="chart border border-gray-300 dark:border-gray-800 rounded"
+              class="{!['Pro']?.includes(data?.user?.tier)
+                ? 'blur-[3px]'
+                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
+            <!-- Overlay with "Upgrade to Pro" -->
+            {#if !["Pro"]?.includes(data?.user?.tier)}
+              <div
+                class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+              >
+                <a
+                  href="/pricing"
+                  class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                >
+                  <span>Upgrade to Pro</span>
+                  <svg
+                    class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
     {/if}
   </div>
 

src/lib/components/Options/OpenInterestByExpiry.svelte

@@ -285,10 +285,41 @@
 
   <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
     {#if config !== null}
+      <div>
+        <div class="grow">
+          <div class="relative">
+            <!-- Apply the blur class to the chart -->
             <div
-        class="border border-gray-300 dark:border-gray-800 rounded w-full"
+              class="{!['Pro']?.includes(data?.user?.tier)
+                ? 'blur-[3px]'
+                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
+            <!-- Overlay with "Upgrade to Pro" -->
+            {#if !["Pro"]?.includes(data?.user?.tier)}
+              <div
+                class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+              >
+                <a
+                  href="/pricing"
+                  class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                >
+                  <span>Upgrade to Pro</span>
+                  <svg
+                    class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
     {/if}
   </div>
 

src/lib/components/Options/OpenInterestByStrike.svelte

@@ -257,10 +257,41 @@
 
   <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
     {#if config !== null}
+      <div>
+        <div class="grow">
+          <div class="relative">
+            <!-- Apply the blur class to the chart -->
             <div
-        class="border border-gray-300 dark:border-gray-800 rounded w-full"
+              class="{!['Pro']?.includes(data?.user?.tier)
+                ? 'blur-[3px]'
+                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
+            <!-- Overlay with "Upgrade to Pro" -->
+            {#if !["Pro"]?.includes(data?.user?.tier)}
+              <div
+                class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+              >
+                <a
+                  href="/pricing"
+                  class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                >
+                  <span>Upgrade to Pro</span>
+                  <svg
+                    class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
     {/if}
   </div>
 

src/lib/components/Options/UnusualActivity.svelte

@@ -744,10 +744,41 @@
           text="Unusual Options trades with a premium of at least 1 million dollar from big whales."
         />
 
+        <div>
+          <div class="grow mt-5">
+            <div class="relative">
+              <!-- Apply the blur class to the chart -->
               <div
-          class="mt-5 border border-gray-300 dark:border-gray-800 rounded"
+                class="{!['Pro']?.includes(data?.user?.tier)
+                  ? 'blur-[3px]'
+                  : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
                 use:highcharts={configUnusual}
               ></div>
+              <!-- Overlay with "Upgrade to Pro" -->
+              {#if !["Pro"]?.includes(data?.user?.tier)}
+                <div
+                  class="font-bold text-lg sm:text-xl absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center text-muted dark:text-white"
+                >
+                  <a
+                    href="/pricing"
+                    class="sm:hover:text-blue-600 dark:sm:hover:text-white dark:text-white flex flex-row items-center"
+                  >
+                    <span>Upgrade to Pro</span>
+                    <svg
+                      class="ml-1 w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="currentColor"
+                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                      /></svg
+                    >
+                  </a>
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
 
         <div class="w-full overflow-x-auto">
           <table

src/lib/components/Options/Volatility.svelte

@@ -425,7 +425,7 @@
           {#if data?.user?.tier === "Pro" || index === 0}
             <label
               on:click={() => (timePeriod = item)}
-              class="px-3 py-1 text-sm shadow-sm border-gray-300 {timePeriod ===
+              class="px-3 py-1 text-sm shadow-sm border-gray-300 dark:border-gray-600 {timePeriod ===
               item
                 ? 'bg-gray-300 dark:bg-white text-black '
                 : ' bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded-md cursor-pointer"
@@ -435,7 +435,7 @@
           {:else if data?.user?.tier !== "Pro"}
             <a
               href="/pricing"
-              class="px-3 py-1 text-sm flex flex-row items-center border border-gray-300 {timePeriod ===
+              class="px-3 py-1 text-sm flex flex-row items-center border border-gray-300 dark:border-gray-600 {timePeriod ===
               item
                 ? 'bg-gray-300 dark:bg-white text-black '
                 : ' bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded-md cursor-pointer"

src/routes/+page.svelte

@@ -106,12 +106,12 @@
         class="text-center mb-10 relative w-fit flex justify-center m-auto text-white"
       >
         <div class="mb-4 flex justify-center -mt-3 lg:mb-8">
-          <a href="/stocks/AAPL/forecast/ai"
+          <a href="/stocks/AAPL/options/contract-lookup"
             ><div
               class="flex items-center justify-center sm:hover:text-muted dark:sm:hover:text-white text-blue-600 dark:text-blue-400"
             >
               <div class="text-lg sm:text-xl font-semibold">
-                Improved AI Score
+                Option Contract Lookup
               </div>
               <div
                 class="-mt-2 ml-1 -rotate-6 rounded-lg bg-red-500 px-1 py-0.5 text-xs font-semibold text-white"

src/routes/sitemaps/[slug]/+server.ts

@@ -135,10 +135,14 @@ const stockExtraSubPaths = [
   "/dark-pool",
   "/options",
   "/options/unusual-activity",
+  "/options/contract-lookup",
   "/options/hottest-contracts",
   "/options/volatility",
   "/options/oi",
   "/insider",
+  "/insider/institute",
+  "/insider/congress-trading",
+  "/insider/transcripts",
   "/dividends",
   "/history",
   "/profile",
@@ -149,6 +153,7 @@ const etfExtraSubPaths = [
   "/dark-pool",
   "/options",
   "/options/unusual-activity",
+  "/options/contract-lookup",
   "/options/hottest-contracts",
   "/options/volatility",
   "/options/oi",