ui fixes

src/lib/components/BullBearSay.svelte

@@ -6,6 +6,23 @@
   
   let rawData = {};
 
+function latestInfoDate(inputDate) {
+    // Convert the input date string to milliseconds since epoch
+    const inputDateMs = Date?.parse(inputDate);
+
+    // Get today's date in milliseconds since epoch
+    const todayMs = Date?.now();
+
+    // Calculate the difference in milliseconds
+    const differenceInMs = todayMs - inputDateMs;
+
+    // Convert milliseconds to days
+    const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
+
+    // Return the difference in days
+    return differenceInDays <=1;
+}
+
   
   function handleMode(i) {
     activeIdx = i;
@@ -81,6 +98,7 @@
 
     <!--End Header-->
       <span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
+        <label class="{latestInfoDate(rawData?.date) ? '' : 'hidden'} bg-purple-600 mr-2 text-white font-medium not-italic text-xs rounded-lg px-2 py-0.5">New</label>
         Updated {rawData?.date}
       </span> 
       <div class="flex mt-5 h-auto">

src/lib/components/ETFProfileCard.svelte

@@ -21,6 +21,8 @@
     let description = '';
     let website = '-';
     let snippet;
+    let dividendYield = '-';
+    let payoutRatio = '-';
 
 let showFullText = false;
   
@@ -38,6 +40,9 @@ let showFullText = false;
       inceptionDate = new Date(info?.inceptionDate)?.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
       holdingsCount = info?.holdingsCount;
       avgVolume = info?.avgVolume; 
+      dividendYield = typeof data?.getStockDividend?.dividendYield !== 'undefined' ? data?.getStockDividend?.dividendYield?.toFixed(2)+'%' : '-'
+      payoutRatio = typeof data?.getStockDividend?.payoutRatio !== 'undefined' ? data?.getStockDividend?.payoutRatio?.toFixed(2)+'%' : '-'
+
       provider = info?.etfProvider;
       country = info?.domicile ?? '-';
       description = info?.description ?? 'A detailed description of the company is not yet available.';
@@ -124,14 +129,12 @@ let showFullText = false;
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe?.toFixed(2)}</td>
                 </tr>
-                {#if data?.getStockDividend}
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Dividend Yield</td>
-                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.dividendYield?.toFixed(2)}%</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{dividendYield}</td>
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Payout Ratio</td>
-                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.payoutRatio?.toFixed(2)}%</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{payoutRatio}</td>
                 </tr>
-                {/if}
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Holdings</td>
                   <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>