update options flow page

jsconfig.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
-}

src/lib/components/Table/OptionsFlowTable.svelte

@@ -237,7 +237,13 @@
   <div class="table">
     <VirtualList
       width="100%"
-      height={$screenWidth < 640 ? 550 : 850}
+      height={$screenWidth < 640
+        ? data?.user?.tier === "Pro"
+          ? 550
+          : 250
+        : data?.user?.tier === "Pro"
+          ? 850
+          : 250}
       itemCount={displayedData.length}
       itemSize={40}
     >
@@ -584,7 +590,11 @@
         let:index
         let:style
         {style}
-        class="tr {index % 2 === 0 ? 'bg-odd' : 'bg-[#17171D]'}"
+        class="tr {index % 2 === 0 ? 'bg-[#19191F]' : 'bg-[#121217]'} {index +
+          1 ===
+          rawData?.length && data?.user?.tier !== 'Pro'
+          ? 'opacity-[0.3]'
+          : ''}"
       >
         <!-- Row data -->
 
@@ -791,7 +801,6 @@
   .th {
     display: none;
     font-weight: 700;
-    background-color: #09090b;
   }
 
   .th > .td {

src/routes/options-flow/+page.server.ts

@@ -10,7 +10,8 @@ export const load = async ({ locals, cookies }) => {
         "X-API-KEY": apiKey,
       },
     });
-    const output = await response.json();
+    let output = await response.json();
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
 
     return output;
   };

src/routes/options-flow/+page.svelte

@@ -16,6 +16,7 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import { Calendar } from "$lib/components/shadcn/calendar/index.js";
   import CalendarIcon from "lucide-svelte/icons/calendar";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   import { page } from "$app/stores";
 
@@ -529,15 +530,10 @@
   }
 
   async function websocketRealtimeData() {
+    if (data?.user?.tier === "Pro") {
       newData = [];
       try {
         socket = new WebSocket(data?.wsURL + "/options-flow-reader");
-      /*
-    socket.addEventListener("open", () => {
-      const ids = rawData.map(item => item.id);
-      sendMessage(JSON.stringify({ ids }));
-    });
-    */
 
         socket.addEventListener("message", (event) => {
           const totalVolume = displayCallVolume + displayPutVolume;
@@ -603,6 +599,7 @@
         setTimeout(() => websocketRealtimeData(), 400);
       }
     }
+  }
 
   function daysLeft(targetDate) {
     const targetTime = new Date(targetDate).getTime();
@@ -1668,6 +1665,7 @@
                 {filteredData}
                 {rawData}
               />
+              <UpgradeToPro {data} />
             </div>
           {:else}
             <div
@@ -1686,12 +1684,6 @@
             </div>
           {/if}
         </div>
-
-        <!--
-          <div class="relative bottom-[400px] w-fit m-auto flex justify-center items-center">
-            <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
-          </div>
-          -->
       {:else}
         <div class="flex justify-center items-center h-80">
           <div class="relative">