update hedge fund page

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

@@ -294,9 +294,9 @@ function getYearFromDate(dateString) {
 
   
   
-    <section class="w-full max-w-6xl overflow-hidden m-auto min-h-screen pt-5 pb-60 sm:px-10 xl:px-0">
+<section class="w-full max-w-6xl overflow-hidden m-auto min-h-screen pt-5 pb-60">
   
-      <div class="text-sm breadcrumbs ml-4 pb-10">
+  <div class="text-sm breadcrumbs ml-4 sm:ml-1 pb-10">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li> 
       <li><a href="/hedge-funds" class="text-gray-300">Hedge Funds</a></li> 
@@ -369,7 +369,7 @@ function getYearFromDate(dateString) {
 
                  <!--Start Widget-->
                  <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
-                    <div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                  <div class="sm:hidden w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
                      <!--Start Total Amount Traded-->  
                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-2xl h-20">
                       <div class="flex flex-col items-start">
@@ -383,7 +383,7 @@ function getYearFromDate(dateString) {
                   <!--End Total Amount Traded-->
                   
                     <!--Start-->  
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                    <div class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm sm:text-[0.85rem]">3 Year Perf.</span>
                           <span class="text-start text-[1rem] sm:text-sm font-semibold text-white mt-0.5">
@@ -418,7 +418,7 @@ function getYearFromDate(dateString) {
                   <!--End-->
 
                   <!--Start-->  
-                     <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                   <div class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm sm:text-[0.85rem]">5 Year Perf.</span>
                         <span class="text-start text-[1rem] sm:text-sm font-semibold text-white mt-0.5">
@@ -453,7 +453,7 @@ function getYearFromDate(dateString) {
 
 
                    <!--Start-->  
-                     <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                   <div class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm sm:text-[0.85rem]">Incept. Perf.</span>
                         <span class="text-start text-[1rem] sm:text-sm font-semibold text-white mt-0.5">
@@ -527,7 +527,108 @@ function getYearFromDate(dateString) {
   
 
                   </div>
+                  
                   {/if}
+
+
+                   <!--Start Widget-->
+                 <div class="hidden sm:flex justify-center items-center w-full mt-5 mb-10 m-auto">
+                  <div class="w-full grid grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                     <!--Start Total Amount Traded-->  
+                     <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-2xl h-20">
+                      <div class="flex flex-col items-start">
+                          <span class="font-medium text-gray-200 text-[1rem]">AUM</span>
+                          <span class="text-start text-[1rem] font-medium text-white mt-0.5">
+                            {abbreviateNumber(rawData?.marketValue,true)}
+                          </span>
+                      </div>
+                      
+                  </div>
+                  <!--End Total Amount Traded-->
+                  
+                    <!--Start-->  
+                    <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                      <div class="flex flex-col items-start">
+                          <span class="font-medium text-gray-200 text-[1rem]">3 Year Perf.</span>
+                          <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
+                            {#if rawData?.performancePercentage3year >=0}
+                            <span class="text-[#10DB06]">+{abbreviateNumber(rawData?.performancePercentage3year?.toFixed(2))}%</span>
+                          {:else}
+                            <span class="text-[#FF2F1F]">{abbreviateNumber(rawData?.performancePercentage3year?.toFixed(2))}% </span> 
+                          {/if}
+                          </span>
+                      </div>
+                      <!-- Circular Progress -->
+                        <div class="relative size-10 ml-auto">
+                          <svg class="size-full w-10 h-10" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                            <!-- Background Circle -->
+                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                            <!-- Progress Circle inside a group with rotation -->
+                            <g class="origin-center -rotate-90 transform">
+                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {rawData?.performancePercentage3year >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- rawData?.performancePercentage3year) >= 0 ? 100-(rawData?.performancePercentage3year)?.toFixed(2) : 0}></circle>
+                            </g>
+                          </svg>
+                        </div>
+                      </div>
+                  <!--End-->
+
+                     <!--Start-->  
+                     <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                      <div class="flex flex-col items-start">
+                          <span class="font-medium text-gray-200 text-[1rem]">5 Year Perf.</span>
+                          <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
+                            {#if rawData?.performancePercentage5year >=0}
+                            <span class="text-[#10DB06]">+{abbreviateNumber(rawData?.performancePercentage5year?.toFixed(2))}%</span>
+                          {:else}
+                            <span class="text-[#FF2F1F]">{abbreviateNumber(rawData?.performancePercentage5year?.toFixed(2))}% </span> 
+                          {/if}
+                          </span>
+                      </div>
+                      <!-- Circular Progress -->
+                        <div class="relative size-10 ml-auto">
+                          <svg class="size-full w-10 h-10" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                            <!-- Background Circle -->
+                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                            <!-- Progress Circle inside a group with rotation -->
+                            <g class="origin-center -rotate-90 transform">
+                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {rawData?.performancePercentage5year >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- rawData?.performancePercentage5year) >= 0 ? 100-(rawData?.performancePercentage5year)?.toFixed(2) : 0}></circle>
+                            </g>
+                          </svg>
+                  </div>
+                </div>
+                  <!--End-->
+  
+  
+                     <!--Start-->  
+                     <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                      <div class="flex flex-col items-start">
+                          <span class="font-medium text-gray-200 text-[1rem]">Incept. Perf.</span>
+                          <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
+                            {#if rawData?.performanceSinceInceptionPercentage >=0}
+                            <span class="text-[#10DB06]">+{abbreviateNumber(rawData?.performanceSinceInceptionPercentage?.toFixed(2))}%</span>
+                          {:else}
+                            <span class="text-[#FF2F1F]">{abbreviateNumber(rawData?.performanceSinceInceptionPercentage?.toFixed(2))}% </span> 
+                          {/if}
+                          </span>
+                      </div>
+                      <!-- Circular Progress -->
+                        <div class="relative size-10 ml-auto">
+                          <svg class="size-full w-10 h-10" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                            <!-- Background Circle -->
+                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                            <!-- Progress Circle inside a group with rotation -->
+                            <g class="origin-center -rotate-90 transform">
+                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {rawData?.performanceSinceInceptionPercentage >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- rawData?.performanceSinceInceptionPercentage) >= 0 ? 100-(rawData?.performanceSinceInceptionPercentage)?.toFixed(2) : 0}></circle>
+                            </g>
+                          </svg>
+                  </div>
+                </div>
+                  <!--End-->
+
+
+                  </div>
+                </div>
+                
                 <div class="p-0 sm:p-10 bg-[#0F0F0F] sm:bg-[#202020] rounded-lg sm:min-h-[430px] pt-6">
                   <div class="h-auto w-full ">
                     
@@ -542,31 +643,34 @@ function getYearFromDate(dateString) {
                       </div>
                     
                     {#if rawList?.length !== 0}
-                    <div class="hidden sm:block sm:-ml-1 sm:overflow-hidden sm:overflow-y-scroll scroller w-full m-auto h-auto sm:max-h-[700px]">
+                    <div class="hidden sm:block sm:overflow-hidden sm:overflow-y-scroll scroller w-full m-auto h-auto sm:max-h-[700px]">
 
-                      <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#202020] m-auto mt-4 ">
+                      <table class="-ml-3 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#202020] m-auto mt-4 ">
                         <!-- head -->
                         <thead>
                           <tr class="bg-[#202020]">
                             <th class="shadow-md text-start bg-[#202020] text-white text-sm font-semibold">
                               Name
                             </th>
-                            <th class="shadow-md text-end bg-[#202020] text-white text-sm font-semibold">
+                            <th class="shadow-md text-start bg-[#202020] text-white text-sm font-semibold">
                               % of Portfolio
                             </th>
                             {#if changeAssetType === 'Share'}
-                            <th class="shadow-md text-end bg-[#202020] text-white text-sm font-semibold">
+                            <th class="shadow-md text-start bg-[#202020] text-white text-sm font-semibold">
                               Change of Shares
                             </th>
+                            <th class="shadow-md text-start bg-[#202020] text-white text-sm font-semibold">
+                             Shares Owned
+                            </th>
                             {/if}
-                            <th class="shadow-md text-end bg-[#202020] text-white text-sm font-semibold">
+                            <th class="shadow-md text-start bg-[#202020] text-white text-sm font-semibold">
                               Value Owned
                             </th>
-                            <th class="shadow-md text-end bg-[#202020]  text-white text-sm font-semibold">
+                            <th class="shadow-md text-start bg-[#202020]  text-white text-sm font-semibold">
                               Avg. Buy Price
                             </th>
                             {#if changeAssetType !== 'Share'}
-                            <th class="shadow-md text-end bg-[#202020]  text-white text-sm font-semibold">
+                            <th class="shadow-md text-start bg-[#202020]  text-white text-sm font-semibold">
                               Type
                             </th>
                             {/if}
@@ -578,10 +682,7 @@ function getYearFromDate(dateString) {
       
                                 <td class="text-gray-200 pb-3 border-b border-b-[#202020]">
                                   <div class="flex flex-row items-center">
-                                    <div class="flex-shrink-0 rounded-full w-7 h-7 relative bg-[#202020] flex items-center justify-center">
+                                    <div class="flex flex-col">
-                                      <img style="clip-path: circle(50%);" class="avatar w-5 h-5" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} alt="stock logo"/>
-                                    </div>
-                                    <div class="flex flex-col ml-3">
                                       <span class="text-blue-400">{item?.symbol?.replace('_',' ')}</span>
                                       <span class="text-white text-opacity-60 text-xs">{formatString(item?.securityName)}</span>
                                     </div>
@@ -589,25 +690,30 @@ function getYearFromDate(dateString) {
                                   <!--{item?.firstName} {item?.lastName}-->
                                 </td>
       
-                                  <td class="text-end text-sm text-white border-b border-b-[#202020]">
+                                  <td class="text-center text-sm font-semibold text-white border-b border-b-[#202020]">
                                       {item?.weight?.toFixed(2)}%
                                   </td>
 
                                   {#if changeAssetType === 'Share'}
-                                  <td class="text-end text-sm border-b border-b-[#202020] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
+                                  <td class="text-center text-sm font-semibold border-b border-b-[#202020] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
                                     {item?.changeInSharesNumberPercentage !== 0 ? abbreviateNumber(item?.changeInSharesNumberPercentage?.toFixed(2))+'%' : '-'}
                                   </td>
+
+                                  <td class="text-center text-sm font-semibold border-b border-b-[#202020] text-white">
+                                    {item?.sharesNumber !== 0 ? abbreviateNumber(item?.sharesNumber?.toFixed(2)) : '-'}
+                                  </td>
+
                                   {/if}
   
-                                  <td class="text-end text-sm text-white border-b border-b-[#202020]">
+                                  <td class="text-center text-sm font-semibold text-white border-b border-b-[#202020]">
                                     {abbreviateNumber(item?.marketValue,true)}
                                 </td>
   
-                                  <td class="text-end text-xs sm:text-sm text-white border-b border-b-[#202020]">
+                                  <td class="text-center text-sm font-semibold text-white border-b border-b-[#202020]">
                                       ${item?.avgPricePaid}
                                   </td>
                                   {#if changeAssetType !== 'Share'}
-                                  <td class="text-end text-xs sm:text-sm border-b border-b-[#202020] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
+                                  <td class="text-center text-sm font-semibold border-b border-b-[#202020] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                                     {formatString(item?.putCallShare)}
                                   </td>
                                   {/if}
@@ -627,7 +733,7 @@ function getYearFromDate(dateString) {
                       <div class="mt-4 w-full overflow-x-auto scroller">
                         
   
-                        <table class="-ml-1 table table-pin-cols table-sm table-compact mt-3 w-screen">
+                        <table class="-ml-1 table table-sm table-compact mt-3 w-screen">
                           <thead>
                             <tr class="bg-[#0F0F0F]">
                               <td class="shadow-md text-start bg-[#0F0F0F] text-white text-sm font-semibold">
@@ -640,6 +746,9 @@ function getYearFromDate(dateString) {
                               <td class="shadow-md text-end bg-[#0F0F0F] text-white text-sm font-semibold">
                                 Change of Shares
                               </td>
+                              <th class="shadow-md text-end bg-[#0F0F0F] text-white text-sm font-semibold">
+                                Shares Owned
+                               </th>
                               {/if}
                               <td class="shadow-md text-end bg-[#0F0F0F] text-white text-sm font-semibold">
                                 Value Owned
@@ -670,25 +779,28 @@ function getYearFromDate(dateString) {
                                 </td>
 
 
-                                <td class="text-end text-sm font-medium text-white border-b border-b-[#0F0F0F]">
+                              <td class="text-end text-sm font-semibold text-white border-b border-b-[#0F0F0F]">
                                 {item?.weight?.toFixed(2)}%
                               </td>
 
                               {#if changeAssetType === 'Share'}
-                              <td class="text-end text-sm font-medium border-b border-b-[#0F0F0F] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
+                              <td class="text-end text-sm font-semibold border-b border-b-[#0F0F0F] {item?.changeInSharesNumberPercentage > 0 ? 'text-[#00FC50]' : item?.changeInSharesNumberPercentage < 0 ? 'text-[#FC2120]' : 'text-white'}">
                                 {item?.changeInSharesNumberPercentage !== 0 ? abbreviateNumber(item?.changeInSharesNumberPercentage?.toFixed(2))+'%' : '-'}
                               </td>
+                              <td class="text-end text-sm font-semibold border-b border-b-[#0F0F0F] text-white">
+                                {item?.sharesNumber !== 0 ? abbreviateNumber(item?.sharesNumber?.toFixed(2)) : '-'}
+                              </td>
                               {/if}
 
                               <td class="text-end text-sm text-white border-b border-b-[#0F0F0F]">
                                 {abbreviateNumber(item?.marketValue,true)}
                             </td>
 
-                              <td class="text-end text-sm text-white font-medium border-b border-b-[#0F0F0F]">
+                              <td class="text-end text-sm text-white font-semibold border-b border-b-[#0F0F0F]">
                                   ${item?.avgPricePaid}
                               </td>
                               {#if changeAssetType !== 'Share'}
-                              <td class="text-end text-sm font-medium border-b border-b-[#0F0F0F] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
+                              <td class="text-end text-sm font-semibold border-b border-b-[#0F0F0F] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                                 {formatString(item?.putCallShare)}
                               </td>
                               {/if}