update market-flow page

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

@@ -10,8 +10,8 @@ export const load = async ({ locals }) => {
       },
     });
 
-  const output = await response?.json();
-    //output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
+  let output = await response?.json();
+    output.sectorData = user?.tier !== "Pro" ? output?.sectorData?.slice(0, 3) : output?.sectorData;
     return output;
   };
 

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

@@ -8,6 +8,7 @@
     sectorNavigation,
   } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -504,6 +505,7 @@
           </div>
 
           <div class="w-full m-auto">
+            {#if optionsData !== null && data?.user?.tier === "Pro"}
               <div class="flex flex-row items-center mb-3">
                 <label
                   for="marketTideInfo"
@@ -512,12 +514,11 @@
                   Market Tide
                 </label>
                 <InfoModal
-                title={"Sector Flow"}
+                  title={"Market Tide"}
                   content={"Market Tide evaluates the balance between advancing and declining stocks by analyzing SPY price movements, net call premiums, and net put premiums, providing a real-time snapshot of market sentiment and momentum."}
                   id={"marketTideInfo"}
                 />
               </div>
-            {#if optionsData !== null}
               <div
                 class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-800"
               >
@@ -565,9 +566,13 @@
                   <TableHeader {columns} {sortOrders} {sortData} />
                 </thead>
                 <tbody>
-                  {#each stockList as item}
+                  {#each stockList as item, index}
                     <tr
-                      class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd"
+                      class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        1 ===
+                        originalData?.length && data?.user?.tier !== 'Pro'
+                        ? 'opacity-[0.1]'
+                        : ''}"
                     >
                       <td
                         class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
@@ -718,8 +723,9 @@
                 </tbody>
               </table>
             </div>
+            <UpgradeToPro {data} />
           </div>
-
+          {#if data?.user?.tier === "Pro"}
             <div class="w-full m-auto mt-10">
               <div
                 class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
@@ -748,7 +754,8 @@
                           builders={[builder]}
                           class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                         >
-                        <span class="truncate text-white">{selectedSector}</span
+                          <span class="truncate text-white"
+                            >{selectedSector}</span
                           >
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
@@ -891,6 +898,7 @@
                 </table>
               </div>
             </div>
+          {/if}
         </main>
       </div>
     </div>