add dividend announcement component

src/lib/components/DividendAnnouncement.svelte

@@ -0,0 +1,85 @@
+<script lang='ts'>
+import { stockTicker, displayCompanyName } from "$lib/store";
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { abbreviateNumber } from "$lib/utils";
+export let data;
+
+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;
+}
+
+
+$: {
+    if($stockTicker && typeof window !== 'undefined') {
+        rawData = data?.getDividendAnnouncement;
+    }
+}
+
+</script>
+
+
+{#if Object?.keys(rawData)?.length !== 0}
+
+<div class="overflow-hidden">  
+    <!--Start Content-->
+    <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
+
+        <div class="flex flex-col items-center w-full mb-3">
+            <div class="flex flex-row justify-start mr-auto items-center">
+            <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
+            <div class="flex flex-row items-center">
+                <label for="dividendAnnouncement" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                    Dividend Announcement  
+                </label>
+                <InfoModal
+                title={"Dividend Announcement"}
+                content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
+                id={"dividendAnnouncement"}
+                />
+                </div>
+
+            </div>
+        </div>
+
+        <div class="text-white text-[1rem] {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg' : 'bg-[#09090B] pl-1'} ">
+            <div class="mt-1">{$displayCompanyName} has announced its upcoming dividend details on {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}:</div>
+  
+                <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;">
+                      <span class="font-bold">Dividend:</span> ${rawData?.dividend} per share ({(rawData?.dividend/rawData?.dividendPrior-1) > 0 ? '+' :''}{((rawData?.dividend/rawData?.dividendPrior-1)*100)?.toFixed(2)}% YoY)
+                </li>
+                <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
+                    <span class="font-bold">Dividend Yield:</span> {rawData?.dividendYield?.toFixed(2)}%
+                </li>
+                <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
+                    <span class="font-bold">Ex-Dividend Date:</span> {new Date(rawData?.exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                </li>
+
+                <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
+                   <span class="font-bold">Payable Date:</span> {new Date(rawData?.payableDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                </li>
+                
+                <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
+                  <span class="font-bold">Record Date:</span> {new Date(rawData?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                </li>
+        </div>
+
+    </div>
+
+
+    </div>
+{/if}

src/lib/components/EarningsSurprise.svelte

@@ -39,7 +39,7 @@ $: {
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
 
-        <div class="flex flex-col items-center w-full mb-6">
+        <div class="flex flex-col items-center w-full mb-3">
             <div class="flex flex-row justify-start mr-auto items-center">
             <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
             <div class="flex flex-row items-center">
@@ -56,7 +56,7 @@ $: {
             </div>
         </div>
 
-        <div class="text-white text-[1rem] {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg' : 'bg-[#09090B] pl-3'} ">
+        <div class="text-white text-[1rem] {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg' : 'bg-[#09090B] pl-1'} ">
             <div class="mt-1">{$displayCompanyName} has released their quartely earnings on {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}:</div>
   
                     <li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;">

src/lib/components/NextEarnings.svelte

@@ -37,7 +37,7 @@ $: {
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
 
-        <div class="flex flex-col items-center w-full mb-6">
+        <div class="flex flex-col items-center w-full mb-3">
             <div class="flex flex-row justify-start mr-auto items-center">
             <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
             <div class="flex flex-row items-center">
@@ -54,7 +54,7 @@ $: {
             </div>
         </div>
 
-        <div class="text-white text-[1rem]">
+        <div class="text-white text-[1rem] pl-1">
             {$displayCompanyName} is scheduled to release its earnings on  {new Date(rawData?.date ?? null)?.toLocaleString('en-US', {
                 month: 'short',
                 day: 'numeric',

src/routes/stocks/[tickerID]/+layout.server.ts

@@ -1,7 +1,3 @@
-export const config = {
-  runtime: "nodejs20.x",
-};
-
 const cleanString = (input) => {
   const substringsToRemove = [
     "Depositary",
@@ -79,6 +75,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     "/one-day-price",
     "/next-earnings",
     "/earnings-surprise",
+    "/dividend-announcement",
   ];
 
   const promises = [
@@ -101,6 +98,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getOneDayPrice,
     getNextEarnings,
     getEarningsSurprise,
+    getDividendAnnouncement,
     getUserWatchlist,
     getCommunitySentiment,
   ] = await Promise.all(promises);
@@ -118,6 +116,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getOneDayPrice,
     getNextEarnings,
     getEarningsSurprise,
+    getDividendAnnouncement,
     getUserWatchlist,
     getCommunitySentiment,
     companyName: cleanString(getStockDeck?.at(0)?.companyName),

src/routes/stocks/[tickerID]/+page.svelte

@@ -38,6 +38,7 @@
   import BullBearSay from "$lib/components/BullBearSay.svelte";
   import NextEarnings from "$lib/components/NextEarnings.svelte";
   import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
+  import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
 
   import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
   import Lazy from "$lib/components/Lazy.svelte";
@@ -1072,6 +1073,10 @@ async function exportData(timePeriod:string) {
             <NextEarnings {data} />
           </div>
 
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getDividendAnnouncement || {})?.length !== 0 ? '' : 'hidden'}">
+            <DividendAnnouncement {data} />
+          </div>
+
           <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
             <BullBearSay {data} />
           </div>