From 1427713528689b0912a8dd27f50022786e026a9e Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 5 Dec 2024 22:12:01 +0100
Subject: [PATCH] update price alert page

---
 src/routes/api/get-price-alert/+server.ts |   2 +-
 src/routes/price-alert/+page.server.ts    |   2 +-
 src/routes/price-alert/+page.svelte       | 627 +++++++++++++++++-----
 src/routes/watchlist/stocks/+page.svelte  |   1 +
 4 files changed, 484 insertions(+), 148 deletions(-)

diff --git a/src/routes/api/get-price-alert/+server.ts b/src/routes/api/get-price-alert/+server.ts
index f6617064..f78566d8 100644
--- a/src/routes/api/get-price-alert/+server.ts
+++ b/src/routes/api/get-price-alert/+server.ts
@@ -15,7 +15,7 @@ export const GET: RequestHandler = async ({ locals }) => {
 
   let output = await response.json();
 
-      output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
+      output.data = output?.data?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
 
 
   return new Response(JSON.stringify(output));
diff --git a/src/routes/price-alert/+page.server.ts b/src/routes/price-alert/+page.server.ts
index 334d03ea..0817f6d5 100644
--- a/src/routes/price-alert/+page.server.ts
+++ b/src/routes/price-alert/+page.server.ts
@@ -13,7 +13,7 @@ export const load = async ({ locals }) => {
     });
 
     let output = await response.json();
-    output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
+    output.data = output?.data?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
     return output;
   };
 
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index d0ee9616..1f51837d 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import { numberOfUnreadNotification, openPriceAlert } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-
+  import {
+    groupNews,
+    groupEarnings,
+    compareTimes,
+    formatTime,
+    abbreviateNumber,
+    calculateChange,
+  } from "$lib/utils";
   //import { enhance } from '$app/forms';
   import toast from "svelte-french-toast";
   import { goto } from "$app/navigation";
@@ -10,19 +16,54 @@
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import { Combobox } from "bits-ui";
   import PriceAlert from "$lib/components/PriceAlert.svelte";
+  import { onMount } from "svelte";
 
   export let data;
+
   let timeoutId;
   let searchBarData = [];
 
   let addTicker = "";
   let addAssetType = "";
-
+  let activeIdx = 0;
+  let rawTabData = [];
+  let displayList = [];
   let editMode = false;
   let numberOfChecked = 0;
-  let deletePriceAlertList = [];
+  let priceAlertList = data?.getPriceAlert?.data;
 
-  let priceAlertList = data?.getPriceAlert;
+  let deletePriceAlertList = [];
+  let news = data?.getPriceAlert?.news || [];
+  let earnings = data?.getPriceAlert?.earnings || [];
+
+  news = news?.map((item) => {
+    const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
+    return match ? { ...item, type: match?.type } : { ...item };
+  });
+  earnings = earnings?.map((item) => {
+    const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
+    return match ? { ...item, name: match?.name } : { ...item };
+  });
+  let groupedNews = [];
+  let groupedEarnings = [];
+
+  if (priceAlertList?.length > 0) {
+    groupedEarnings = groupEarnings(earnings);
+    groupedNews = groupNews(news, priceAlertList);
+  } else {
+    groupedEarnings = [];
+    groupedNews = [];
+  }
+  changeTab(0);
+
+  const tabs = [
+    {
+      title: "News",
+    },
+    {
+      title: "Earnings",
+    },
+  ];
 
   async function handleFilter(priceAlertId) {
     const filterSet = new Set(deletePriceAlertList);
@@ -46,12 +87,6 @@
           "border-radius: 10px; background: #333; color: #fff;  padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
       });
     } else {
-      priceAlertList = priceAlertList?.filter(
-        (item) => !deletePriceAlertList?.includes(item?.id),
-      );
-
-      priceAlertList = [...priceAlertList];
-
       const postData = {
         priceAlertIdList: deletePriceAlertList,
       };
@@ -63,6 +98,34 @@
         },
         body: JSON.stringify(postData),
       });
+
+      const symbolsToDelete = priceAlertList
+        ?.filter((item) => deletePriceAlertList.includes(item.id))
+        .map((item) => item.symbol);
+
+      // Filter out the price alerts
+      priceAlertList = priceAlertList?.filter(
+        (item) => !deletePriceAlertList?.includes(item.id),
+      );
+
+      // Filter news and earnings using the symbolsToDelete
+      news = news?.filter(
+        (newsItem) => !symbolsToDelete.includes(newsItem?.symbol),
+      );
+
+      earnings = earnings?.filter(
+        (earningsItem) => !symbolsToDelete.includes(earningsItem?.symbol),
+      );
+      priceAlertList = [...priceAlertList];
+
+      if (priceAlertList?.length > 0) {
+        groupedNews = [...groupNews(news, priceAlertList)];
+        groupedEarnings = [...groupEarnings(earnings)];
+      } else {
+        groupedEarnings = [];
+        groupedEarnings = [];
+      }
+
       deletePriceAlertList = [];
       numberOfChecked = 0;
       editMode = !editMode;
@@ -98,6 +161,16 @@
     event?.preventDefault();
   }
 
+  function changeTab(i) {
+    activeIdx = i;
+    if (activeIdx === 0) {
+      rawTabData = groupedNews;
+    } else {
+      rawTabData = groupedEarnings;
+    }
+    displayList = rawTabData?.slice(0, 8);
+  }
+
   async function getPriceAlertList() {
     const response = await fetch("/api/get-price-alert", {
       method: "GET",
@@ -106,8 +179,31 @@
       },
     });
     let output = await response.json();
-    output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
-    priceAlertList = [...output];
+    output.data = output?.data?.sort((a, b) =>
+      a?.symbol?.localeCompare(b?.symbol),
+    );
+    priceAlertList = [...output?.data];
+
+    news = output?.news;
+    earnings = output?.earnings;
+
+    news = news?.map((item) => {
+      const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
+      return match ? { ...item, type: match?.type } : { ...item };
+    });
+
+    earnings = earnings?.map((item) => {
+      const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
+      return match ? { ...item, name: match?.name } : { ...item };
+    });
+    if (priceAlertList?.length > 0) {
+      groupedEarnings = groupEarnings(earnings);
+      groupedNews = groupNews(news, priceAlertList);
+    } else {
+      groupedEarnings = [];
+      groupedNews = [];
+    }
+    changeTab(0);
   }
 
   $: charNumber = $screenWidth < 640 ? 15 : 40;
@@ -126,6 +222,23 @@
     editMode = !editMode;
   }
 
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && displayList?.length !== rawTabData?.length) {
+      const nextIndex = displayList?.length;
+      const filteredItem = rawTabData?.slice(nextIndex, nextIndex + 8);
+      displayList = [...displayList, ...filteredItem];
+    }
+  }
+
+  onMount(async () => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+
   let inputValue = "";
   let touchedInput = false;
 
@@ -179,7 +292,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -200,47 +313,7 @@
             </h1>
           </div>
 
-          {#if priceAlertList?.length === 0}
-            <div class="flex flex-col justify-center items-center m-auto pt-8">
-              <span class="text-white font-bold text-white text-xl sm:text-3xl">
-                No Alerts set
-              </span>
-
-              <span
-                class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
-              >
-                Create price alerts for your stocks that have the most potential
-                in your opinion.
-              </span>
-              {#if !data?.user}
-                <a
-                  class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
-                  href="/register"
-                >
-                  Get Started
-                  <span
-                    class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
-                  >
-                    <svg
-                      class="w-4 h-4"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><g transform="rotate(90 12 12)"
-                        ><g fill="none"
-                          ><path
-                            d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
-                          /><path
-                            fill="white"
-                            d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
-                          /></g
-                        ></g
-                      ></svg
-                    >
-                  </span>
-                </a>
-              {/if}
-            </div>
-          {:else}
+          {#if data?.user}
             <div
               class="w-full {$screenWidth < 640
                 ? 'grid grid-cols-2'
@@ -285,7 +358,7 @@
                     >
                     {#if !editMode}
                       <span class="ml-1 text-white text-sm sm:text-[1rem]">
-                        Edit Watchlist
+                        Edit Alert
                       </span>
                     {:else}
                       <span class="ml-1 text-white text-sm sm:text-[1rem]">
@@ -302,7 +375,7 @@
                   bind:inputValue
                   bind:touchedInput
                 >
-                  <div class="relative sm:ml-3 w-full">
+                  <div class="relative w-full">
                     <div
                       class="absolute inset-y-0 left-0 flex items-center pl-2.5"
                     >
@@ -361,104 +434,366 @@
               </div>
             </div>
             <!--Start Table-->
-            <div
-              class="w-full rounded-md overflow-hidden overflow-x-scroll no-scrollbar"
-            >
-              <table
-                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
+            {#if priceAlertList?.length > 0}
+              <div
+                class="w-full rounded-md overflow-hidden overflow-x-scroll no-scrollbar"
               >
-                <!-- head -->
-                <thead>
-                  <tr class="">
-                    <th class="text-white font-semibold text-sm">Symbol</th>
-                    <th class="text-white font-semibold text-sm">Company</th>
+                <table
+                  class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
+                >
+                  <!-- head -->
+                  <thead>
+                    <tr class="">
+                      <th class="text-white font-semibold text-sm">Symbol</th>
+                      <th class="text-white font-semibold text-sm">Company</th>
 
-                    <th class="text-white font-semibold text-end text-sm"
-                      >Price Target</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm">
-                      Price</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm"
-                      >% Change</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm"
-                      >Volume</th
-                    >
-                  </tr>
-                </thead>
-                <tbody class="p-3">
-                  {#each priceAlertList as item}
-                    <!-- row -->
-                    <tr
-                      class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
-                    >
-                      <td
-                        on:click={() => handleFilter(item?.id)}
-                        class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
+                      <th class="text-white font-semibold text-end text-sm"
+                        >Price Target</th
                       >
-                        <input
-                          type="checkbox"
-                          checked={deletePriceAlertList?.includes(item?.id) ??
-                            false}
-                          class="{!editMode
-                            ? 'hidden'
-                            : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3 cursor-pointer"
-                        />
-                        {#if !editMode}
-                          <HoverStockChart
-                            symbol={item?.symbol}
-                            assetType={item?.assetType}
-                          />
-                        {:else}
-                          {item?.symbol}
-                        {/if}
-                      </td>
-
-                      <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                      <th class="text-white font-semibold text-end text-sm"
+                        >Condition</th
                       >
-                        {item?.name?.length > charNumber
-                          ? item?.name?.slice(0, charNumber) + "..."
-                          : item?.name}
-                      </td>
-
-                      <td
-                        class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                      <th class="text-white font-semibold text-end text-sm">
+                        Price</th
                       >
-                        {item?.targetPrice}
-                      </td>
-
-                      <td
-                        class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                      <th class="text-white font-semibold text-end text-sm"
+                        >% Change</th
                       >
-                        {item.price?.toFixed(2)}
-                      </td>
-
-                      <td
-                        class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                      <th class="text-white font-semibold text-end text-sm"
+                        >Volume</th
                       >
-                        {#if item?.changesPercentage >= 0}
-                          <span class="text-[#00FC50]"
-                            >+{item?.changesPercentage?.toFixed(2)}%</span
-                          >
-                        {:else}
-                          <span class="text-[#FF2F1F]"
-                            >{item?.changesPercentage?.toFixed(2)}%
-                          </span>
-                        {/if}
-                      </td>
-                      <td
-                        class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
-                      >
-                        {abbreviateNumber(item?.volume)}
-                      </td>
                     </tr>
+                  </thead>
+                  <tbody class="p-3">
+                    {#each priceAlertList as item}
+                      <!-- row -->
+                      <tr
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                      >
+                        <td
+                          on:click={() => handleFilter(item?.id)}
+                          class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
+                        >
+                          <input
+                            type="checkbox"
+                            checked={deletePriceAlertList?.includes(item?.id) ??
+                              false}
+                            class="{!editMode
+                              ? 'hidden'
+                              : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3 cursor-pointer"
+                          />
+                          {#if !editMode}
+                            <HoverStockChart
+                              symbol={item?.symbol}
+                              assetType={item?.assetType}
+                            />
+                          {:else}
+                            {item?.symbol}
+                          {/if}
+                        </td>
+
+                        <td
+                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                        >
+                          {item?.name?.length > charNumber
+                            ? item?.name?.slice(0, charNumber) + "..."
+                            : item?.name}
+                        </td>
+
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                        >
+                          {item?.targetPrice}
+                        </td>
+
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                        >
+                          {item?.condition}
+                        </td>
+
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                        >
+                          {item.price?.toFixed(2)}
+                        </td>
+
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                        >
+                          {#if item?.changesPercentage >= 0}
+                            <span class="text-[#00FC50]"
+                              >+{item?.changesPercentage?.toFixed(2)}%</span
+                            >
+                          {:else}
+                            <span class="text-[#FF2F1F]"
+                              >{item?.changesPercentage?.toFixed(2)}%
+                            </span>
+                          {/if}
+                        </td>
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                        >
+                          {abbreviateNumber(item?.volume)}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+
+              <div
+                class="w-full m-auto border-b border-gray-600 mt-10 mb-5"
+              ></div>
+
+              <div class=" text-white">
+                <div
+                  class="inline-flex justify-center w-full rounded-md sm:w-auto mb-3"
+                >
+                  <div
+                    class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  >
+                    {#each tabs as item, i}
+                      {#if data?.user?.tier !== "Pro" && i > 0}
+                        <button
+                          on:click={() => goto("/pricing")}
+                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                        >
+                          <span
+                            class="relative text-sm sm:text-[1rem] block font-semibold"
+                          >
+                            {item.title}
+                            <svg
+                              class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="#A3A3A3"
+                                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                              /></svg
+                            >
+                          </span>
+                        </button>
+                      {:else}
+                        <button
+                          on:click={() => changeTab(i)}
+                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                          i
+                            ? 'z-0'
+                            : ''} "
+                        >
+                          {#if activeIdx === i}
+                            <div
+                              class="absolute inset-0 rounded-md bg-[#fff]"
+                            ></div>
+                          {/if}
+                          <span
+                            class="relative text-sm sm:text-[1rem] block font-semibold {activeIdx ===
+                            i
+                              ? 'text-black'
+                              : 'text-white'}"
+                          >
+                            {item.title}
+                          </span>
+                        </button>
+                      {/if}
+                    {/each}
+                  </div>
+                </div>
+                {#if activeIdx === 0}
+                  {#if groupedNews?.length > 0}
+                    {#each displayList as [date, titleGroups]}
+                      <h3 class="mb-1.5 mt-3 font-semibold text-faded">
+                        {date}
+                      </h3>
+                      <div class="border border-gray-700">
+                        {#each titleGroups as { title, items, symbols }}
+                          <div class="flex border-gray-600 text-small">
+                            <div
+                              class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                            >
+                              {new Date(
+                                items[0].publishedDate,
+                              ).toLocaleTimeString("en-US", {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                hour12: true,
+                              })}
+                            </div>
+                            <div
+                              class="flex-grow px-3 py-2 lg:py-1 border-t border-gray-700"
+                            >
+                              <a
+                                href={items[0].url}
+                                target="_blank"
+                                rel="nofollow noopener noreferrer"
+                                class="text-white sm:hover:text-blue-400"
+                              >
+                                <h4
+                                  class="text-sm font-semibold lg:text-[1rem]"
+                                >
+                                  {title}
+                                </h4>
+                              </a>
+                              <div
+                                class="flex flex-wrap gap-x-2 pt-2 text-sm lg:pt-0.5"
+                              >
+                                <div class="text-white lg:hidden">
+                                  {new Date(
+                                    items[0].publishedDate,
+                                  ).toLocaleTimeString("en-US", {
+                                    hour: "2-digit",
+                                    minute: "2-digit",
+                                    hour12: true,
+                                  })}
+                                </div>
+                                <div class="text-white">
+                                  {items[0].site}
+                                </div>
+                                &#183;
+                                <div class="flex flex-wrap gap-x-2">
+                                  {#each symbols as symbol}
+                                    <a
+                                      href={`/${items[0].type}/${symbol}`}
+                                      class="sm:hover:text-white text-blue-400"
+                                    >
+                                      {symbol}
+                                    </a>
+                                  {/each}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        {/each}
+                      </div>
+                    {/each}
+                  {:else}
+                    <div class="text-sm sm:text-[1rem] mt-5">
+                      No news yet. Add some stocks to the price alert list to
+                      see the latest news.
+                    </div>
+                  {/if}
+                {:else if groupedEarnings?.length > 0}
+                  {#each displayList as [date, titleGroups]}
+                    <h3 class="mb-1.5 mt-3 font-semibold text-faded">
+                      {date}
+                    </h3>
+                    <div class="border border-gray-700">
+                      {#each titleGroups as item}
+                        <div class="flex border-gray-600 text-small">
+                          <div
+                            class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                          >
+                            {formatTime(item?.time)}
+                          </div>
+                          <div
+                            class="flex-grow px-3 py-2 lg:py-1 border-t border-gray-700"
+                          >
+                            <div>
+                              <strong>{item?.name}</strong>
+                              (<HoverStockChart symbol={item?.symbol} />)
+                              {item?.isToday
+                                ? "will report today"
+                                : [
+                                      "Monday",
+                                      "Tuesday",
+                                      "Wednesday",
+                                      "Thursday",
+                                    ].includes(
+                                      new Date().toLocaleDateString("en-US", {
+                                        weekday: "long",
+                                      }),
+                                    )
+                                  ? "will report tomorrow"
+                                  : "will report Monday"}
+                              {#if item?.time}
+                                {#if compareTimes(item?.time, "16:00") >= 0}
+                                  after market closes.
+                                {:else if compareTimes(item?.time, "09:30") <= 0}
+                                  before market opens.
+                                {:else}
+                                  during market.
+                                {/if}
+                              {/if}
+                              Analysts estimate {abbreviateNumber(
+                                item?.revenueEst,
+                                true,
+                              )} in revenue ({(
+                                (item?.revenueEst / item?.revenuePrior - 1) *
+                                100
+                              )?.toFixed(2)}% YoY) and ${item?.epsEst} in earnings
+                              per share ({(
+                                (item?.epsEst / item?.epsPrior - 1) *
+                                100
+                              )?.toFixed(2)}% YoY).
+                            </div>
+
+                            <div
+                              class="flex flex-wrap gap-x-2 pt-2 text-sm lg:pt-0.5"
+                            >
+                              <div class="text-white lg:hidden">
+                                {formatTime(item?.time)}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
                   {/each}
-                </tbody>
-              </table>
-            </div>
-            <!--End Table-->
+                {:else}
+                  <div class="text-sm sm:text-[1rem] mt-5">
+                    No earnings yet. Add some stocks to the alert list to see
+                    the latest earnings data.
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            {#if priceAlertList?.length === 0}
+              <div
+                class="flex flex-col justify-center items-center m-auto mt-14"
+              >
+                <span
+                  class="text-white font-bold text-white text-xl sm:text-3xl"
+                >
+                  No Alerts set
+                </span>
+
+                <span
+                  class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
+                >
+                  Create price alerts for your stocks that have the most
+                  potential in your opinion.
+                </span>
+                {#if !data?.user}
+                  <a
+                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
+                    href="/register"
+                  >
+                    Get Started
+                    <span
+                      class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
+                    >
+                      <svg
+                        class="w-4 h-4"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><g transform="rotate(90 12 12)"
+                          ><g fill="none"
+                            ><path
+                              d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
+                            /><path
+                              fill="white"
+                              d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
+                            /></g
+                          ></g
+                        ></svg
+                      >
+                    </span>
+                  </a>
+                {/if}
+              </div>
+            {/if}
           {/if}
         </main>
 
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 3d303b8c..be5f5da2 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -237,6 +237,7 @@
 
     watchList = output?.data;
     news = output?.news;
+    console.log(news);
     earnings = output?.earnings;
 
     news = news?.map((item) => {