From 2ad5c98c7a8b8582809ca1e10802317e0b117936 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 15 Jul 2024 17:42:14 +0200
Subject: [PATCH] fix hedge fund page && landing page

---
 src/lib/components/SECFilingsCard.svelte   |   5 +-
 src/routes/+page.svelte                    |   2 +-
 src/routes/hedge-funds/[slug]/+page.svelte | 105 +++++++++++++++++----
 3 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/SECFilingsCard.svelte b/src/lib/components/SECFilingsCard.svelte
index 232ddf75..c904a13c 100644
--- a/src/lib/components/SECFilingsCard.svelte
+++ b/src/lib/components/SECFilingsCard.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
-import { afterUpdate } from 'svelte';
 import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 import { fade } from 'svelte/transition';
@@ -171,7 +170,7 @@ $: {
 
 
       <div class="w-11/12 mt-5">
-        <div class="relative right-0 bg-[#09090B] rounded-lg">
+        <div class="relative right-0 bg-[#141417] rounded-lg">
 
           <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
             <AnimateSharedLayout>
@@ -226,7 +225,7 @@ $: {
       <div class="mt-5 w-full">
 
         {#each displayList as item}
-          <div class="flex flex-col justify-center m-auto items-start rounded-md bg-[#09090B] shadow-lg h-auto w-11/12 mb-3" transition:fade={{ delay: 0, duration: 80 }} in={accordionOpen[item?.year]}>
+          <div class="flex flex-col justify-center m-auto items-start rounded-md bg-[#141417] shadow-lg h-auto w-11/12 mb-3" transition:fade={{ delay: 0, duration: 80 }} in={accordionOpen[item?.year]}>
             
           
             <div class="flex flex-row items-center w-full p-3">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3183464e..54ab622c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,7 +19,7 @@ const intersectOptions = { callback, threshold, rootMargin }
 function callback(entry: IntersectionObserverEntry) {
   if (entry.intersectionRatio > threshold) {
     entry.target.classList.remove('invisible')
-    entry.target.classList.add('fade-down')
+    entry.target.classList.add('animate-fade-in-once')
   }
 }
 
diff --git a/src/routes/hedge-funds/[slug]/+page.svelte b/src/routes/hedge-funds/[slug]/+page.svelte
index 3a7b3e5e..4bea71cd 100644
--- a/src/routes/hedge-funds/[slug]/+page.svelte
+++ b/src/routes/hedge-funds/[slug]/+page.svelte
@@ -4,6 +4,8 @@
   import cardBackground from "$lib/images/bg-hedge-funds.png";
   import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import { Motion, AnimateSharedLayout } from "svelte-motion";
+
 
   import { abbreviateNumber, formatString } from '$lib/utils';
 
@@ -26,9 +28,38 @@
   let deactivateContent = data?.user?.tier === 'Pro' ? false : true;
 
   let numOfAssets;
-  let changeAssetType = 'Share'
+  let changeAssetType = 'Stocks'
   const spyData = [{'date': '1993-03-31', 'price': 25.59}, {'date': '1993-06-30', 'price': 25.7}, {'date': '1993-09-30', 'price': 26.36}, {'date': '1993-12-31', 'price': 26.92}, {'date': '1994-03-31', 'price': 25.91}, {'date': '1994-06-30', 'price': 26.01}, {'date': '1994-09-30', 'price': 27.17}, {'date': '1994-12-31', 'price': 27.03}, {'date': '1995-03-31', 'price': 29.89}, {'date': '1995-06-30', 'price': 32.64}, {'date': '1995-09-30', 'price': 35.27}, {'date': '1995-12-31', 'price': 37.31}, {'date': '1996-03-31', 'price': 39.43}, {'date': '1996-06-30', 'price': 41.12}, {'date': '1996-09-30', 'price': 42.27}, {'date': '1996-12-31', 'price': 45.71}, {'date': '1997-03-31', 'price': 46.83}, {'date': '1997-06-30', 'price': 55.08}, {'date': '1997-09-30', 'price': 59.08}, {'date': '1997-12-31', 'price': 61.0}, {'date': '1998-03-31', 'price': 69.3}, {'date': '1998-06-30', 'price': 71.65}, {'date': '1998-09-30', 'price': 64.57}, {'date': '1998-12-31', 'price': 78.51}, {'date': '1999-03-31', 'price': 81.93}, {'date': '1999-06-30', 'price': 87.7}, {'date': '1999-09-30', 'price': 82.65}, {'date': '1999-12-31', 'price': 94.52}, {'date': '2000-03-31', 'price': 97.01}, {'date': '2000-06-30', 'price': 93.95}, {'date': '2000-09-30', 'price': 93.11}, {'date': '2000-12-31', 'price': 85.31}, {'date': '2001-03-31', 'price': 76.09}, {'date': '2001-06-30', 'price': 80.17}, {'date': '2001-09-30', 'price': 68.55}, {'date': '2001-12-31', 'price': 75.28}, {'date': '2002-03-31', 'price': 75.64}, {'date': '2002-06-30', 'price': 65.59}, {'date': '2002-09-30', 'price': 54.45}, {'date': '2002-12-31', 'price': 59.03}, {'date': '2003-03-31', 'price': 56.92}, {'date': '2003-06-30', 'price': 65.82}, {'date': '2003-09-30', 'price': 67.64}, {'date': '2003-12-31', 'price': 75.66}, {'date': '2004-03-31', 'price': 77.17}, {'date': '2004-06-30', 'price': 78.43}, {'date': '2004-09-30', 'price': 76.85}, {'date': '2004-12-31', 'price': 83.76}, {'date': '2005-03-31', 'price': 82.06}, {'date': '2005-06-30', 'price': 83.25}, {'date': '2005-09-30', 'price': 86.31}, {'date': '2005-12-31', 'price': 87.8}, {'date': '2006-03-31', 'price': 91.92}, {'date': '2006-06-30', 'price': 90.51}, {'date': '2006-09-30', 'price': 95.41}, {'date': '2006-12-31', 'price': 101.72}, {'date': '2007-03-31', 'price': 102.39}, {'date': '2007-06-30', 'price': 108.94}, {'date': '2007-09-30', 'price': 111.02}, {'date': '2007-12-31', 'price': 106.95}, {'date': '2008-03-31', 'price': 97.01}, {'date': '2008-06-30', 'price': 94.55}, {'date': '2008-09-30', 'price': 86.19}, {'date': '2008-12-31', 'price': 67.6}, {'date': '2009-03-31', 'price': 59.99}, {'date': '2009-06-30', 'price': 69.76}, {'date': '2009-09-30', 'price': 80.49}, {'date': '2009-12-31', 'price': 85.41}, {'date': '2010-03-31', 'price': 90.04}, {'date': '2010-06-30', 'price': 79.82}, {'date': '2010-09-30', 'price': 88.72}, {'date': '2010-12-31', 'price': 98.27}, {'date': '2011-03-31', 'price': 104.07}, {'date': '2011-06-30', 'price': 104.09}, {'date': '2011-09-30', 'price': 89.71}, {'date': '2011-12-31', 'price': 100.13}, {'date': '2012-03-31', 'price': 112.84}, {'date': '2012-06-30', 'price': 109.63}, {'date': '2012-09-30', 'price': 116.59}, {'date': '2012-12-31', 'price': 116.15}, {'date': '2013-03-31', 'price': 128.34}, {'date': '2013-06-30', 'price': 132.11}, {'date': '2013-09-30', 'price': 139.04}, {'date': '2013-12-31', 'price': 153.67}, {'date': '2014-03-31', 'price': 156.29}, {'date': '2014-06-30', 'price': 164.35}, {'date': '2014-09-30', 'price': 166.21}, {'date': '2014-12-31', 'price': 174.36}, {'date': '2015-03-31', 'price': 175.9}, {'date': '2015-06-30', 'price': 176.25}, {'date': '2015-09-30', 'price': 164.93}, {'date': '2015-12-31', 'price': 176.51}, {'date': '2016-03-31', 'price': 178.86}, {'date': '2016-06-30', 'price': 183.25}, {'date': '2016-09-30', 'price': 190.17}, {'date': '2016-12-31', 'price': 197.69}, {'date': '2017-03-31', 'price': 209.39}, {'date': '2017-06-30', 'price': 215.82}, {'date': '2017-09-30', 'price': 225.35}, {'date': '2017-12-31', 'price': 240.6}, {'date': '2018-03-31', 'price': 238.2}, {'date': '2018-06-30', 'price': 246.66}, {'date': '2018-09-30', 'price': 265.54}, {'date': '2018-12-31', 'price': 229.6}, {'date': '2019-03-31', 'price': 260.66}, {'date': '2019-06-30', 'price': 271.68}, {'date': '2019-09-30', 'price': 276.45}, {'date': '2019-12-31', 'price': 301.3}, {'date': '2020-03-31', 'price': 242.7}, {'date': '2020-06-30', 'price': 291.63}, {'date': '2020-09-30', 'price': 317.99}, {'date': '2020-12-31', 'price': 356.53}, {'date': '2021-03-31', 'price': 379.17}, {'date': '2021-06-30', 'price': 410.87}, {'date': '2021-09-30', 'price': 413.23}, {'date': '2021-12-31', 'price': 458.95}, {'date': '2022-03-31', 'price': 437.78}, {'date': '2022-06-30', 'price': 367.25}, {'date': '2022-09-30', 'price': 349.14}, {'date': '2022-12-31', 'price': 375.54}, {'date': '2023-03-31', 'price': 403.55}, {'date': '2023-06-30', 'price': 438.58}, {'date': '2023-09-30', 'price': 424.44}, {'date': '2023-12-31', 'price': 473.84}, {'date': '2024-03-31', 'price': 523.07}];
 
+  const tabs = [
+    {
+      title: "Stocks",
+    },
+    {
+      title: "Options",
+    }
+  ];
+
+
+let activeIdx = 0;
+
+
+function changeTab(index) {
+    activeIdx = index;
+    switch (activeIdx) {
+        case 0:
+            changeAssetType = 'Stocks';
+            break;
+        case 1:
+            changeAssetType = 'Options';
+            break;
+        // Default case in case changeType doesn't match any of the specified cases
+        default:
+            // Handle the default case or leave it empty if not needed
+            break;
+    }
+}
+
 
 // Helper function to calculate percentage difference
 function calculatePercentageDifference(startPrice, endPrice) {
@@ -246,7 +277,7 @@ function tabFunction(state) {
     if(changeAssetType && typeof window !== 'undefined') {
       let liste;
       rawList = rawData?.holdings ?? [];
-      if(changeAssetType === 'Share') {
+      if(changeAssetType === 'Stocks') {
         liste = rawList?.filter(item => item?.putCallShare === 'Share')
       }
       else {
@@ -285,7 +316,6 @@ function tabFunction(state) {
   <!-- Other meta tags -->
   <meta property="og:title" content="{formatString($displayCompanyName)} - Hedge Fund · stocknear"/>
   <meta property="og:description" content="Get detailed information about portfolio size, market value, win rate, turn over, and peformance of the hedge fund.">
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
@@ -293,7 +323,6 @@ function tabFunction(state) {
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content="{formatString($displayCompanyName)} - Hedge Fund · stocknear"/>
   <meta name="twitter:description" content="Get detailed information about portfolio size, market value, win rate, turn over, and peformance of the hedge fund.">
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
@@ -634,19 +663,59 @@ function tabFunction(state) {
                   </div>
                 </div>
                 
-                <div class="p-0 sm:p-10 bg-[#09090B] sm:bg-[#09090B] border border-gray-800 rounded-lg sm:min-h-[430px] pt-6">
+                <div class="p-3 sm:p-5 bg-[#09090B] sm:bg-[#09090B] border border-gray-800 rounded-lg sm:min-h-[430px] pt-6">
                   <div class="h-auto w-full ">
                     
                     
                       <span class="text-[#F5F5F5] font-bold text-2xl">
                         {numOfAssets} Assets
                       </span>
-  
-                      <div role="tablist" class="bg-[#313131] tabs tabs-boxed w-full sm:w-48 mt-4">
-                        <a on:click={() =>  tabFunction('Share')} role="tab" class="tab text-white {changeAssetType === 'Share' ? 'bg-purple-600' : ''}">Stocks</a>
-                        <a on:click={() => tabFunction('Option')} role="tab" class="tab text-white {changeAssetType !== 'Share' ? 'bg-purple-600' : ''}">Options</a>
+                      
+                      <div class="w-64 mt-5">
+                        <div class="relative right-0 bg-[#141417] rounded-lg">
+                
+                          <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
+                        <AnimateSharedLayout>
+                          {#each tabs as item, i}
+                            <button
+                              on:click={() => changeTab(i)}
+                              class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx === i
+                                ? 'z-0'
+                                : ''} "
+                              >
+                              {#if activeIdx === i}
+                                <Motion
+                                  layoutId="clicked-btn"
+                                  transition={{ duration: 0.2 }}
+                                  let:motion
+                                >
+                                  <div
+                                    use:motion
+                                    class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
+                                  ></div>
+                                </Motion>
+                              {/if}
+                              
+                              {#if item?.title === 'Stocks'}
+                              <span
+                                class="relative block font-medium duration-200 {changeAssetType === 'Stocks' ? 'text-black' : 'text-white'}">
+                                {item.title}
+                              </span>
+                              {:else if item?.title === 'Options'}
+                              <span
+                                class="relative block font-medium duration-200 {changeAssetType === 'Options' ? 'text-black' : 'text-white'}">
+                                {item.title}
+                              </span>
+                              {/if}
+            
+                            </button>
+                          {/each}
+                        </AnimateSharedLayout>
                       </div>
-                    
+                      </div>
+                      </div>
+
+     
                     {#if rawList?.length !== 0}
                     <div class="hidden sm:block sm:overflow-hidden sm:overflow-y-scroll scroller w-full m-auto h-auto sm:max-h-[700px]">
 
@@ -660,7 +729,7 @@ function tabFunction(state) {
                             <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                               % of Portfolio
                             </th>
-                            {#if changeAssetType === 'Share'}
+                            {#if changeAssetType === 'Stocks'}
                             <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                               Change of Shares
                             </th>
@@ -674,7 +743,7 @@ function tabFunction(state) {
                             <th class="shadow-md text-ednd bg-[#09090B]  text-white text-sm font-semibold">
                               Avg. Buy Price
                             </th>
-                            {#if changeAssetType !== 'Share'}
+                            {#if changeAssetType === 'Options'}
                             <th class="shadow-md text-end bg-[#09090B]  text-white text-sm font-semibold">
                               Type
                             </th>
@@ -699,7 +768,7 @@ function tabFunction(state) {
                                       {item?.weight >= 0.01 ? item?.weight?.toFixed(2) : '< 0.01'}%
                                   </td>
 
-                                  {#if changeAssetType === 'Share'}
+                                  {#if changeAssetType === 'Stocks'}
                                   <td class="text-center text-sm font-semibold border-b border-b-[#27272A] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
                                     {item?.changeInSharesNumberPercentage !== 0 ? abbreviateNumber(item?.changeInSharesNumberPercentage?.toFixed(2))+'%' : '-'}
                                   </td>
@@ -717,7 +786,7 @@ function tabFunction(state) {
                                   <td class="text-end text-sm font-semibold text-white border-b border-b-[#27272A]">
                                       ${item?.avgPricePaid}
                                   </td>
-                                  {#if changeAssetType !== 'Share'}
+                                  {#if changeAssetType === 'Options'}
                                   <td class="text-end text-sm font-semibold border-b border-b-[#27272A] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                                     {formatString(item?.putCallShare)}
                                   </td>
@@ -771,7 +840,7 @@ function tabFunction(state) {
                               <td class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                 % of Portfolio
                               </td>
-                              {#if changeAssetType === 'Share'}
+                              {#if changeAssetType === 'Stocks'}
                               <td class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                 Change of Shares
                               </td>
@@ -785,7 +854,7 @@ function tabFunction(state) {
                               <td class="shadow-md text-end bg-[#09090B]  text-white text-sm font-semibold">
                                 Avg. Buy Price
                               </td>
-                              {#if changeAssetType !== 'Share'}
+                              {#if changeAssetType === 'Options'}
                               <td class="shadow-md text-end bg-[#09090B]  text-white text-sm font-semibold">
                                 Type
                               </td>
@@ -812,7 +881,7 @@ function tabFunction(state) {
                                 {item?.weight >= 0.01 ? item?.weight?.toFixed(2) : '< 0.01'}%
                               </td>
 
-                              {#if changeAssetType === 'Share'}
+                              {#if changeAssetType === 'Stocks'}
                               <td class="text-end text-sm font-semibold border-b border-b-[#09090B] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
                                 {item?.changeInSharesNumberPercentage !== 0 ? abbreviateNumber(item?.changeInSharesNumberPercentage?.toFixed(2))+'%' : '-'}
                               </td>
@@ -828,7 +897,7 @@ function tabFunction(state) {
                               <td class="text-end text-sm text-white font-semibold border-b border-b-[#09090B]">
                                   ${item?.avgPricePaid}
                               </td>
-                              {#if changeAssetType !== 'Share'}
+                              {#if changeAssetType === 'Options'}
                               <td class="text-end text-sm font-semibold border-b border-b-[#09090B] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                                 {formatString(item?.putCallShare)}
                               </td>