From cd989a6547ee27eb902c486c5f511fe42a156dde Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 15 Sep 2024 09:52:40 +0200
Subject: [PATCH] adding paywalls back

---
 src/routes/+layout.svelte                     |  4 +-
 src/routes/analysts/+page.svelte              |  9 ++---
 src/routes/analysts/+page.ts                  |  2 +-
 src/routes/analysts/top-stocks/+page.svelte   |  5 +--
 src/routes/analysts/top-stocks/+page.ts       |  2 +-
 .../corporate-lobbying-tracker/+page.svelte   | 12 ++----
 .../corporate-lobbying-tracker/+page.ts       | 37 ++++++++----------
 src/routes/cramer-tracker/+page.svelte        |  3 +-
 src/routes/cramer-tracker/+page.ts            |  4 +-
 .../etf/[tickerID]/options/+page.svelte       | 29 ++++++++------
 src/routes/most-retail-volume/+page.svelte    |  6 +--
 src/routes/most-retail-volume/+page.ts        |  2 +-
 src/routes/most-shorted-stocks/+page.svelte   |  6 +--
 src/routes/most-shorted-stocks/+page.ts       |  2 +-
 src/routes/pricing/+page.svelte               |  4 +-
 .../[tickerID]/forecast/ai/+page.svelte       | 26 ++++++-------
 .../stocks/[tickerID]/forecast/ai/+page.ts    | 38 +++++++++----------
 .../stocks/[tickerID]/insider/+page.svelte    |  8 ++--
 .../stocks/[tickerID]/options/+page.svelte    | 29 ++++++++------
 .../stats/balance-sheet/+page.svelte          |  7 ++++
 .../[tickerID]/stats/cash-flow/+page.svelte   |  7 ++++
 .../[tickerID]/stats/income/+page.svelte      |  4 +-
 .../[tickerID]/stats/ratios/+page.svelte      |  7 ++++
 23 files changed, 135 insertions(+), 118 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9ac1b2ba..e176097e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -589,7 +589,7 @@ $: {
                     <Card.Title>Upgrade to Pro</Card.Title>
                     <Card.Description>
                       {#if !data?.user || data?.user?.tier !== 'Pro' || data?.user?.freeTrial === true}
-                       Support the Platform to be always free ❤
+                       Get unlimit access to all features
                       {/if}
                     </Card.Description>
                   </Card.Header>
@@ -900,7 +900,7 @@ $: {
                 <Card.Header class="p-2 pt-0 md:p-4">
                   <Card.Title>Upgrade to Pro</Card.Title>
                   <Card.Description>
-                    Support the Platform to be always free ❤
+                    Get unlimit access to all features
                   </Card.Description>
                 </Card.Header>
                 <Card.Content class="p-2 pt-0 md:p-4 md:pt-0">
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index ac7bc742..7049eb04 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -1,7 +1,7 @@
 <script lang='ts'>
   import { goto } from '$app/navigation';
   import { numberOfUnreadNotification } from '$lib/store';
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { onMount } from 'svelte';
 
@@ -261,7 +261,7 @@ $: {
                       <tbody>
                         {#each analytRatingList as item, index}
 
-                        <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+                        <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                           <td class="text-white text-sm sm:text-[1rem] font-semibold text-white text-center">
                             {item?.rank}
                           </td>
@@ -329,8 +329,7 @@ $: {
                     </table>
                   </div>
                   
-                  <!--<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>-->
-
+                  <UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>
                   {:else}
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
@@ -400,4 +399,4 @@ $: {
       
       
   
-</section>
+</section>
\ No newline at end of file
diff --git a/src/routes/analysts/+page.ts b/src/routes/analysts/+page.ts
index 49e0a3a9..8a1d3825 100644
--- a/src/routes/analysts/+page.ts
+++ b/src/routes/analysts/+page.ts
@@ -22,7 +22,7 @@ export const load = async ({ parent }) => {
       setCache("", output, "getTopAnalyst");
     }
 
-    //output = user?.tier !== 'Pro' ? output?.reverse()?.slice(0,6) : output;
+    output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
 
     return output;
   };
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index 06b54691..a2424515 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { numberOfUnreadNotification, screenWidth } from '$lib/store';
 	import { abbreviateNumber } from '$lib/utils';
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { onMount } from 'svelte';
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
@@ -297,8 +297,7 @@ $: {
                       </table>
                     </div>
 
-                    <!--<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>-->
-
+                    <UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>
                     {:else}
                     <div class="flex justify-center items-center h-80">
                       <div class="relative">
diff --git a/src/routes/analysts/top-stocks/+page.ts b/src/routes/analysts/top-stocks/+page.ts
index bcf7926e..ea3c90b6 100644
--- a/src/routes/analysts/top-stocks/+page.ts
+++ b/src/routes/analysts/top-stocks/+page.ts
@@ -22,7 +22,7 @@ export const load = async ({ parent }) => {
       setCache("", output, "getTopAnalystStocksg");
     }
 
-    //output = user?.tier !== 'Pro' ? output?.reverse()?.slice(0,6) : output;
+    output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
     return output;
   };
 
diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 495dd534..e23f4ffc 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -3,7 +3,7 @@
     import { numberOfUnreadNotification, screenWidth } from '$lib/store';
     import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
     import { onMount } from 'svelte';
-    //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+    import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
     import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
     
@@ -224,18 +224,14 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
                           {/each}
                           </tbody>
                         </table>
+
                     </div>
                       <InfiniteLoading on:infinite={infiniteHandler} />
-                      <!--<UpgradeToPro data={data} title="Get the latest dark pool trades in realtime from Hedge Funds & Major Institutional Traders"/>-->
-                  
-                      
-                      
-
                   </div>
+                     <UpgradeToPro data={data} title="Get the latest lobbying spendings in realtime of US stock companies"/>
+
                   
                  
-
-  
                   {:else}
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
diff --git a/src/routes/corporate-lobbying-tracker/+page.ts b/src/routes/corporate-lobbying-tracker/+page.ts
index 7cd8755e..0293db0f 100644
--- a/src/routes/corporate-lobbying-tracker/+page.ts
+++ b/src/routes/corporate-lobbying-tracker/+page.ts
@@ -1,39 +1,34 @@
-import {getCache, setCache } from '$lib/store';
-
-
-
-export const load = async ({parent}) => {
+import { getCache, setCache } from "$lib/store";
 
+export const load = async ({ parent }) => {
   const getCorporateLobbyingTracker = async () => {
     let output;
+    const { apiKey, apiURL, user } = await parent();
 
-    const cachedData = getCache('', 'getCorporateLobbyingTracker');
+    const cachedData = getCache("", "getCorporateLobbyingTracker");
     if (cachedData) {
       output = cachedData;
     } else {
-    
-    const { apiKey, apiURL } = await parent();
+      const response = await fetch(apiURL + "/lobbying-tracker", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-KEY": apiKey,
+        },
+      });
 
-    const response = await fetch(apiURL + '/lobbying-tracker', {
-      method: 'GET',
-      headers: {
-        "Content-Type": "application/json", "X-API-KEY": apiKey
-      },
-    });
-
-    output = await response.json();
-
-    setCache('', output, 'getCorporateLobbyingTracker');
+      output = await response.json();
 
+      setCache("", output, "getCorporateLobbyingTracker");
     }
 
-    //output = data?.user?.tier !== 'Pro' ? output?.slice(0,6) : output;
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
 
     return output;
   };
 
   // Make sure to return a promise
   return {
-    getCorporateLobbyingTracker: await getCorporateLobbyingTracker()
+    getCorporateLobbyingTracker: await getCorporateLobbyingTracker(),
   };
-};
\ No newline at end of file
+};
diff --git a/src/routes/cramer-tracker/+page.svelte b/src/routes/cramer-tracker/+page.svelte
index a9355f65..306b0898 100644
--- a/src/routes/cramer-tracker/+page.svelte
+++ b/src/routes/cramer-tracker/+page.svelte
@@ -4,6 +4,7 @@
     import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
     import { onMount } from 'svelte';
     import ArrowLogo from "lucide-svelte/icons/move-up-right";
+    import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
 
     //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   
@@ -203,7 +204,7 @@
                         </table>
                     </div>
                       <InfiniteLoading on:infinite={infiniteHandler} />
-                      <!--<UpgradeToPro data={data} title="Get the latest dark pool trades in realtime from Hedge Funds & Major Institutional Traders"/>-->
+                      <UpgradeToPro data={data} title="Get the latest dark pool trades in realtime from Hedge Funds & Major Institutional Traders"/>
     
                   </div>
   
diff --git a/src/routes/cramer-tracker/+page.ts b/src/routes/cramer-tracker/+page.ts
index 410bf2f3..30f61844 100644
--- a/src/routes/cramer-tracker/+page.ts
+++ b/src/routes/cramer-tracker/+page.ts
@@ -22,7 +22,9 @@ export const load = async ({ parent }) => {
       setCache("", output, "getCramerTracker");
     }
 
-    //output = user?.tier !== "Pro" ? output?.slice(0, 5) : output;
+    output = user?.tier !== "Pro" ? output?.slice(0, 5) : output;
+
+    //output = data?.user?.tier !== 'Pro' ? output?.slice(0,6) : output;
 
     return output;
   };
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 70a70c00..2badd177 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -5,7 +5,7 @@
   import { abbreviateNumber } from '$lib/utils';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { onMount } from 'svelte'
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { init, use } from 'echarts/core'
   import { BarChart,LineChart } from 'echarts/charts'
   import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -411,10 +411,12 @@ onMount(async () => {
   }
   
 
+  if(data?.user?.tier === 'Pro') {
     window.addEventListener('scroll', handleScroll);
     return () => {
         window.removeEventListener('scroll', handleScroll);
     };
+  }
 })
 
 
@@ -716,8 +718,8 @@ $: {
                                           </tr>
                                         </thead>
                                         <tbody>
-                                          {#each optionList as item, index}
-                                          <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($etfTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+                                          {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
+                                          <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($etfTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                             
                                             <td class="text-white text-sm sm:text-[1rem] text-start">
                                               {formatDate(item?.date)}
@@ -809,8 +811,8 @@ $: {
                                           </tr>
                                         </thead>
                                         <tbody>
-                                          {#each optionChainList as item, index}
-                                          <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                                          {#each (data?.user?.tier === 'Pro' ? optionChainList : optionChainList?.slice(0,3)) as item, index}
+                                          <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionChainList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                             
                                             <td class="text-white text-sm sm:text-[1rem] text-end">
                                                {abbreviateNumber(item?.total_premium_call,true)}
@@ -856,7 +858,7 @@ $: {
                                     
                                 </div>
     
-                                <!---<UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>-->
+                                <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
     
                                 {:else}
                                 <div class="flex justify-center items-center m-auto mt-16 mb-6">
@@ -891,8 +893,15 @@ $: {
 <!-- Put this part before </body> tag -->
 
 <dialog id="optionDetailsDesktopModal" class="modal modal-bottom sm:modal-middle cursor-pointer ">
-  <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#09090B] border-t sm:border border-gray-600 h-auto">
-     <p class="text-gray-200 mt-10 cursor-text">
+  <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto">
+    <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+      <button class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white">
+        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"/>
+        </svg>
+      </button>
+    </form>
+
+    <p class="text-gray-200 mt-10 cursor-text">
       <span class="text-white text-xl font-semibold mb-4">Option Data Details:</span>
       <br class="">
       {#if optionHistoryList?.length !== 0}
@@ -1005,10 +1014,8 @@ $: {
         {/if}
       </div>
     </div>
-
-
   </div>
-  <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+  <form method="dialog" class="modal-backdrop">
     <button>close</button>
   </form>
 </dialog>
diff --git a/src/routes/most-retail-volume/+page.svelte b/src/routes/most-retail-volume/+page.svelte
index 17106883..088acad8 100644
--- a/src/routes/most-retail-volume/+page.svelte
+++ b/src/routes/most-retail-volume/+page.svelte
@@ -3,7 +3,7 @@
   import { numberOfUnreadNotification, screenWidth } from '$lib/store';
 	import { abbreviateNumber } from '$lib/utils';
   import { onMount } from 'svelte';
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   
@@ -178,7 +178,7 @@ async function handleScroll() {
                         <tbody>
                           {#each stockList as item, index}
   
-                          <tr on:click={() => goto(`/${item?.assetType}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+                          <tr on:click={() => goto(`/${item?.assetType}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -216,7 +216,7 @@ async function handleScroll() {
                         </tbody>
                       </table>
                   </div>
-                    <!--<UpgradeToPro data={data} title="Get the top 100 stocks that retail investors put their money on the market to never miss out the next hype"/>-->
+                    <UpgradeToPro data={data} title="Get the top 100 stocks that retail investors put their money on the market to never miss out the next hype"/>
   
                 </div>
 
diff --git a/src/routes/most-retail-volume/+page.ts b/src/routes/most-retail-volume/+page.ts
index 6e6ccefe..ebd79dab 100644
--- a/src/routes/most-retail-volume/+page.ts
+++ b/src/routes/most-retail-volume/+page.ts
@@ -23,7 +23,7 @@ export const load = async ({ parent }) => {
       setCache("", output, "getMostRetailVolume");
     }
 
-    //output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
 
     return output;
   };
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
index 213b353d..1fc7b6e2 100644
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ b/src/routes/most-shorted-stocks/+page.svelte
@@ -4,7 +4,7 @@
   import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 	import { abbreviateNumber } from '$lib/utils';
   import { onMount } from 'svelte';
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   
@@ -163,7 +163,7 @@
                         <tbody>
                           {#each shortedList as item, index}
   
-                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === shortedList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -205,7 +205,7 @@
                       </table>
                   </div>
                     <InfiniteLoading on:infinite={infiniteHandler} />
-                    <!--<UpgradeToPro data={data} title="Get the most shorted stocks on the market to never miss out the next short squeeze"/>-->
+                    <UpgradeToPro data={data} title="Get the most shorted stocks on the market to never miss out the next short squeeze"/>
   
                 </div>
 
diff --git a/src/routes/most-shorted-stocks/+page.ts b/src/routes/most-shorted-stocks/+page.ts
index 4f603f41..8a6cb205 100644
--- a/src/routes/most-shorted-stocks/+page.ts
+++ b/src/routes/most-shorted-stocks/+page.ts
@@ -22,7 +22,7 @@ export const load = async ({ parent }) => {
       setCache("", output, "getMostShortedStocks");
     }
 
-    //output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
 
     return output;
   };
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 1e043e8c..ab37db1d 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -56,10 +56,10 @@ async function purchasePlan(subscriptionType:string='') {
 
         }
         else if(mode) {
-            subId = import.meta.env.VITE_LEMON_SQUEEZY_ANNUAL_ID
+            subId = import.meta.env.VITE_LEMON_SQUEEZY_ANNUAL_19_99_ID
         }
         else {
-            subId = import.meta.env.VITE_LEMON_SQUEEZY_MONTHLY_ID
+            subId = import.meta.env.VITE_LEMON_SQUEEZY_MONTHLY_1_99_ID
         }
         const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
         const checkoutUrl =
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
index f107eb71..abe27a5d 100644
--- a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
   import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystInsightComponent, sentimentComponent, trendAnalysisComponent, priceAnalysisComponent, fundamentalAnalysisComponent } from "$lib/store";
+  import PriceAnalysis from "$lib/components/PriceAnalysis.svelte";
+  import TrendAnalysis from "$lib/components/TrendAnalysis.svelte";
+  import FundamentalAnalysis from "$lib/components/FundamentalAnalysis.svelte";
+  import SentimentAnalysis from "$lib/components/SentimentAnalysis.svelte";
+  import AnalystInsight from "$lib/components/AnalystInsight.svelte";
+
   import Lazy from "$lib/components/Lazy.svelte";
 
   export let data;
@@ -33,41 +39,31 @@
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         <Lazy>
           <div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/AnalystInsight.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
+              <AnalystInsight  data={data} />
           </div>
         </Lazy>
 
         <Lazy>
           <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/PriceAnalysis.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
+              <PriceAnalysis data={data} />
           </div>
         </Lazy>
 
         <Lazy>
           <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/TrendAnalysis.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
+              <TrendAnalysis data={data} />
           </div>
         </Lazy>
 
         <Lazy>
           <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/FundamentalAnalysis.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
+              <FundamentalAnalysis data={data} />
           </div>
         </Lazy>
 
         <Lazy>
           <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/SentimentAnalysis.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
+              <SentimentAnalysis data={data} />
           </div>
         </Lazy>
       </div>
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.ts b/src/routes/stocks/[tickerID]/forecast/ai/+page.ts
index 095a324c..ad22faa2 100644
--- a/src/routes/stocks/[tickerID]/forecast/ai/+page.ts
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.ts
@@ -1,36 +1,32 @@
-import { getCache, setCache } from '$lib/store';
-
+import { getCache, setCache } from "$lib/store";
 
 export const load = async ({ parent, params }) => {
-
   const getAnalystTickerHistory = async () => {
-    
     let output;
 
-    const cachedData = getCache(params.tickerID, 'getAnalystTickerHistory');
-      if (cachedData) {
-        output = cachedData;
-      } else {
+    const cachedData = getCache(params.tickerID, "getAnalystTickerHistory");
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const { apiURL, apiKey } = await parent();
 
-        const {apiURL, apiKey} = await parent();
-
-        const postData = {
-          ticker: params.tickerID
-        };
+      const postData = {
+        ticker: params.tickerID,
+      };
 
       // make the POST request to the endpoint
-      const response = await fetch(apiURL + '/analyst-ticker-history', {
-        method: 'POST',
+      const response = await fetch(apiURL + "/analyst-ticker-history", {
+        method: "POST",
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": apiKey
+          "Content-Type": "application/json",
+          "X-API-KEY": apiKey,
         },
-        body: JSON.stringify(postData)
+        body: JSON.stringify(postData),
       });
 
-    output = await response.json();
+      output = await response.json();
 
-    setCache(params.tickerID, output, 'getAnalystTickerHistory');
-    
+      setCache(params.tickerID, output, "getAnalystTickerHistory");
     }
 
     return output;
@@ -38,6 +34,6 @@ export const load = async ({ parent, params }) => {
 
   // Make sure to return a promise
   return {
-    getAnalystTickerHistory: await getAnalystTickerHistory()
+    getAnalystTickerHistory: await getAnalystTickerHistory(),
   };
 };
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index d38623b4..94fcf998 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -3,7 +3,7 @@ import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$li
 import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 import { formatString, abbreviateNumber } from '$lib/utils';
 import InfoModal from '$lib/components/InfoModal.svelte';
-//import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 import { Chart } from 'svelte-echarts'
 import { init, use } from 'echarts/core'
 import { LineChart, BarChart } from 'echarts/charts'
@@ -536,8 +536,8 @@ onMount(async() => {
                               </tr>
                             </thead>
                             <tbody>
-                              {#each insiderTradingList as item, index}
-                              <tr class="text-white odd:bg-[#27272A]">
+                              {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
+                              <tr class="text-white odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
       
                                 <td class="text-white text-sm sm:text-[1rem] border-b border-[#09090B] whitespace-nowrap">
                                   <div class="flex flex-col">
@@ -587,7 +587,7 @@ onMount(async() => {
                         <InfiniteLoading on:infinite={infiniteHandler} />
                       {/if}
 
-                      <!--<UpgradeToPro data={data} title="Access {$displayCompanyName}'s insider transactions to track executive selling and purchasing activity"/>-->
+                      <UpgradeToPro data={data} title="Access {$displayCompanyName}'s insider transactions to track executive selling and purchasing activity"/>
 
 
           
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 00e181f2..c8f74817 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -5,7 +5,7 @@
   import { abbreviateNumber } from '$lib/utils';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { onMount } from 'svelte'
-  //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { init, use } from 'echarts/core'
   import { BarChart,LineChart } from 'echarts/charts'
   import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -411,10 +411,12 @@ onMount(async () => {
   }
   
 
+  if(data?.user?.tier === 'Pro') {
     window.addEventListener('scroll', handleScroll);
     return () => {
         window.removeEventListener('scroll', handleScroll);
     };
+  }
 })
 
 
@@ -716,8 +718,8 @@ $: {
                                           </tr>
                                         </thead>
                                         <tbody>
-                                          {#each optionList as item, index}
-                                          <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($stockTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+                                          {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
+                                          <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($stockTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                             
                                             <td class="text-white text-sm sm:text-[1rem] text-start">
                                               {formatDate(item?.date)}
@@ -809,8 +811,8 @@ $: {
                                           </tr>
                                         </thead>
                                         <tbody>
-                                          {#each optionChainList as item, index}
-                                          <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                                          {#each (data?.user?.tier === 'Pro' ? optionChainList : optionChainList?.slice(0,3)) as item, index}
+                                          <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionChainList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                             
                                             <td class="text-white text-sm sm:text-[1rem] text-end">
                                                {abbreviateNumber(item?.total_premium_call,true)}
@@ -856,7 +858,7 @@ $: {
                                     
                                 </div>
     
-                                <!---<UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>-->
+                                <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
     
                                 {:else}
                                 <div class="flex justify-center items-center m-auto mt-16 mb-6">
@@ -891,8 +893,15 @@ $: {
 <!-- Put this part before </body> tag -->
 
 <dialog id="optionDetailsDesktopModal" class="modal modal-bottom sm:modal-middle cursor-pointer ">
-  <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#09090B] border-t sm:border border-gray-600 h-auto">
-     <p class="text-gray-200 mt-10 cursor-text">
+  <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto">
+    <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+      <button class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white">
+        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"/>
+        </svg>
+      </button>
+    </form>
+
+    <p class="text-gray-200 mt-10 cursor-text">
       <span class="text-white text-xl font-semibold mb-4">Option Data Details:</span>
       <br class="">
       {#if optionHistoryList?.length !== 0}
@@ -1005,10 +1014,8 @@ $: {
         {/if}
       </div>
     </div>
-
-
   </div>
-  <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+  <form method="dialog" class="modal-backdrop">
     <button>close</button>
   </form>
 </dialog>
diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
index 14bdd723..5dad06a8 100644
--- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
@@ -521,9 +521,16 @@ $: {
                                 </label>
                             </li>
                             <li class="w-full">
+                              {#if data?.user?.tier === 'Pro'}
                                 <label on:click={() => filterRule = 'quartely'} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quartely' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
                                   Quartely
                                 </label>
+                              {:else}
+                              <a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
+                                <span class="">Quarterly</span>
+                                <svg class="ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
+                              {/if}
 
                             </li>
                           </ul>
diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
index cfa62314..70141b86 100644
--- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
@@ -487,9 +487,16 @@ $: {
                                 </label>
                             </li>
                             <li class="w-full">
+                              {#if data?.user?.tier === 'Pro'}
                                 <label on:click={() => filterRule = 'quartely'} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quartely' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
                                   Quartely
                                 </label>
+                              {:else}
+                              <a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
+                                <span class="">Quarterly</span>
+                                <svg class="ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
+                              {/if}
 
                             </li>
                           </ul>
diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
index 150f6c1f..c574c965 100644
--- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
@@ -454,18 +454,16 @@ $: {
                                 </label>
                             </li>
                             <li class="w-full">
+                              {#if data?.user?.tier === 'Pro'}
                                 <label on:click={() => filterRule = 'quartely'} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quartely' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
                                   Quartely
                                 </label>
-                            <!--
-                            
                               {:else}
                               <a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
                                 <span class="">Quarterly</span>
                                 <svg class="ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                               {/if}
-                              -->
 
                             </li>
                           </ul>
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index faf601d6..61407136 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -429,9 +429,16 @@ $: {
                                 </label>
                             </li>
                             <li class="w-full">
+                              {#if data?.user?.tier === 'Pro'}
                                 <label on:click={() => filterRule = 'quartely'} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quartely' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
                                   Quartely
                                 </label>
+                              {:else}
+                              <a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
+                                <span class="">Quarterly</span>
+                                <svg class="ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
+                              {/if}
 
                             </li>
                           </ul>