From 991f666269d27002c16eabacd924ffaed51a6f51 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 30 Oct 2024 12:02:12 +0100
Subject: [PATCH] update etf holding

---
 .../etf/[tickerID]/holdings/+page.svelte      | 36 +++++++++-
 src/routes/etf/etf-providers/+layout.svelte   | 69 +++----------------
 .../etf/etf-providers/[slug]/+page.svelte     | 48 +++++++------
 src/routes/stocks/[tickerID]/+page.svelte     |  2 +-
 4 files changed, 68 insertions(+), 87 deletions(-)

diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index c4a11e94..02e2c0a7 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -32,11 +32,13 @@
     };
   });
 
-  $: charNumber = $screenWidth < 640 ? 20 : 30;
+  $: charNumber = $screenWidth < 640 ? 20 : 20;
 
   let columns = [
     { key: "asset", label: "Symbol", align: "left" },
     { key: "name", label: "Name", align: "left" },
+    { key: "price", label: "Price", align: "right" },
+    { key: "changesPercentage", label: "Change", align: "right" },
     { key: "sharesNumber", label: "Shares", align: "right" },
     { key: "weightPercentage", label: "% Weight", align: "right" },
   ];
@@ -44,6 +46,8 @@
   let sortOrders = {
     asset: { order: "none", type: "string" },
     name: { order: "none", type: "string" },
+    price: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
     sharesNumber: { order: "none", type: "number" },
     weightPercentage: { order: "none", type: "number" },
   };
@@ -110,11 +114,11 @@
     if (data?.user?.tier === "Pro") {
       // Add headers row
       const csvRows = [];
-      csvRows.push("Symbol,Name,Shares,Weight");
+      csvRows.push("Symbol,Name,Price, Change, Shares,Weight");
 
       // Add data rows
       rawData.forEach((item) => {
-        const csvRow = `${item?.asset},${item?.name},${item?.sharesNumber},${item?.weightPercentage}`;
+        const csvRow = `${item?.asset},${item?.name},${item?.price},${item?.changesPercentage},${item?.sharesNumber},${item?.weightPercentage}`;
         csvRows.push(csvRow);
       });
 
@@ -271,6 +275,32 @@
                           : formatString(item?.name)}
                       </td>
 
+                      <td
+                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
+                      >
+                        {item?.price}
+                      </td>
+
+                      <td
+                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
+                      >
+                        {#if item?.changesPercentage >= 0}
+                          <span class="text-[#00FC50]"
+                            >+{item?.changesPercentage >= 1000
+                              ? abbreviateNumber(item?.changesPercentage)
+                              : item?.changesPercentage?.toFixed(2)}%</span
+                          >
+                        {:else if item?.changesPercentage < 0}
+                          <span class="text-[#FF2F1F]"
+                            >{item?.changesPercentage <= -1000
+                              ? abbreviateNumber(item?.changesPercentage)
+                              : item?.changesPercentage?.toFixed(2)}%
+                          </span>
+                        {:else}
+                          -
+                        {/if}
+                      </td>
+
                       <td
                         class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
                       >
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 30f68d0d..2ff5060f 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -59,9 +59,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs mb-2 ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li>
@@ -79,62 +79,9 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    ETF Providers
-                  </h1>
-                </div>
-
-                <span
-                  class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  Companies issue and manage ETFs actively traded on the U.S.
-                  stock market.
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-4">
-                  <img class="w-32 ml-4" src={logo} alt="logo" loading="lazy" />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
-          </div>
+          <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
+            ETF Providers
+          </h1>
 
           <div class="w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
             <div class="w-full flex flex-col justify-center items-center">
@@ -154,7 +101,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -174,7 +121,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Analyst 📊
+                  Top Analyst
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -193,7 +140,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Congress Trading 🇺🇸
+                  Congress Trading
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index af5b7820..b4ce3755 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -70,7 +70,7 @@
 <section class="w-full overflow-hidden m-auto">
   {#if rawData?.length !== 0}
     <div
-      class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
+      class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-600 sm:rounded-lg h-auto p-5 mb-4"
     >
       <svg
         class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2"
@@ -93,32 +93,36 @@
   {/if}
 
   <div
-    class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-none sm:rounded-lg overflow-hidden"
+    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
-    <div class="stat">
-      <div class="stat-title text-white text-sm sm:text-lg font-semibold">
-        Listed Funds
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Listed Funds</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {rawData?.length}
+        </div>
       </div>
     </div>
-
-    <div class="stat">
-      <div class="stat-title text-white text-sm sm:text-lg font-semibold">
-        Total Assets
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalAssets)}
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Assets</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalAssets)}
+        </div>
       </div>
     </div>
-
-    <div class="stat">
-      <div class="stat-title text-white text-sm sm:text-lg font-semibold">
-        Average Cost
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {avgExpenseRatio?.toFixed(2)}%
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Average Cost</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {avgExpenseRatio?.toFixed(2)}%
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 0bcb9eac..47dbdb5a 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1018,7 +1018,7 @@
                         ? "before:content-['+'] text-[#00FC50]"
                         : "text-[#FF2F1F]"}
                     >
-                      {displayLegend?.change}%
+                      {displayLegend?.change ?? "-"}%
                     </span>
                     <span class="hidden text-gray-200 sm:block"
                       >({displayData})</span