ui fixes

src/lib/components/Table/Table.svelte

@@ -901,7 +901,9 @@
                     : "-"}
                 </div>
               {:else if column.type === "percent"}
-                {item[column.key]?.toFixed(2) + "%"}
+                {item[column.key] > 0.01
+                  ? item[column.key]?.toFixed(2) + "%"
+                  : "< 0.01%"}
               {:else if column.type === "percentSign"}
                 {#if item[column.key] > 0}
                   <span class="text-[#00FC50]"

src/lib/components/UpgradeToPro.svelte

@@ -18,7 +18,7 @@
         </p>
       </div>
 
-      <div class="mx-auto mt-8 max-w-2xl lg:max-w-5xl">
+      <div class="mx-auto mt-12 max-w-2xl lg:max-w-5xl">
         <dl
           class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:grid-cols-2 lg:gap-y-12"
         >

src/routes/cramer-tracker/+page.server.ts

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

src/routes/cramer-tracker/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { numberOfUnreadNotification, screenWidth } from "$lib/store";
   import { onMount } from "svelte";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import RatingsChart from "$lib/components/RatingsChart.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   export let data;
 
@@ -252,9 +252,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-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-secondary"
+                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-secondary {index +
+                        1 ===
+                        rawData?.length && data?.user?.tier !== 'Pro'
+                        ? 'opacity-[0.1]'
+                        : ''}"
                     >
                       <td class="hidden lg:table-cell"
                         ><button
@@ -381,6 +385,7 @@
                   {/each}
                 </tbody>
               </table>
+              <UpgradeToPro {data} />
             </div>
           </div>
         </main>

src/routes/hedge-funds/[slug]/+page.server.ts

@@ -26,6 +26,7 @@ export const load = async ({ params, locals, setHeaders }) => {
         (item) => item?.sharesNumber && item?.symbol
       );
     }
+
     return output;
   };
 

src/routes/hedge-funds/[slug]/+page.svelte

@@ -2,11 +2,11 @@
   import { numberOfUnreadNotification } from "$lib/store";
   import { formatString, sectorNavigation, abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   export let data;
 
   let hedgeFundStats = data?.getHedgeFundsData;
-  let rawData = data?.getHedgeFundsData?.holdings;
   let companyName = data?.getHedgeFundsData?.name ?? "Company Data";
 
   const excludedRules = new Set([
@@ -80,7 +80,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 pb-40"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -140,7 +140,9 @@
                   class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
                 >
                   <div class="text-2xl font-semibold tracking-tight text-white">
-                    {hedgeFundStats?.numberOfStocks?.toLocaleString("en-US")}
+                    {data?.getHedgeFundsData?.holdings?.length?.toLocaleString(
+                      "en-US",
+                    )}
                   </div>
                   <div class="text-sm font-semibold leading-6 text-gray-300">
                     # of Holdings
@@ -229,20 +231,18 @@
               </div>
             </div>
 
-            <span class="text-white font-semibold text-xl sm:text-2xl">
-              {data?.getHedgeFundsData?.holdings?.length?.toLocaleString(
-                "en-US",
-              )} Stocks
-            </span>
-
             <div class="w-full m-auto mt-10">
               <Table
                 {data}
-                {rawData}
+                rawData={data?.user?.tier === "Pro"
+                  ? data?.getHedgeFundsData?.holdings
+                  : data?.getHedgeFundsData?.holdings?.slice(0, 5)}
                 {excludedRules}
                 {defaultList}
                 {specificRows}
+                hideLastRow={true}
               />
+              <UpgradeToPro {data} />
             </div>
           </div>
         </main>