From 96156185e7cdea41ab4ebb1a20c1509c0ebe7d76 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 28 Oct 2024 14:45:23 +0100
Subject: [PATCH] ui fixes

---
 .../[tickerID]/dividends/+layout.svelte       |  88 ++++---
 .../[tickerID]/financials/+layout.svelte      | 244 ++++++++++++------
 .../stocks/[tickerID]/financials/+page.svelte |  19 +-
 .../financials/balance-sheet/+layout.svelte   |  87 -------
 .../financials/cash-flow/+page.svelte         |  19 +-
 .../[tickerID]/financials/ratios/+page.svelte |  19 +-
 .../stocks/[tickerID]/insider/+layout.svelte  | 209 ++++++++++-----
 .../insider/congress-trading/+layout.svelte   |  80 ------
 .../stocks/[tickerID]/options/+layout.svelte  |   8 +-
 9 files changed, 391 insertions(+), 382 deletions(-)
 delete mode 100644 src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
 delete mode 100644 src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte

diff --git a/src/routes/stocks/[tickerID]/dividends/+layout.svelte b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
index 9940ab83..464c89b6 100644
--- a/src/routes/stocks/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
@@ -1,7 +1,35 @@
 <script lang="ts">
+  import { stockTicker } from "$lib/store";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   export let data;
+
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
+
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
+
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
+
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
 </script>
 
 <section class="w-auto overflow-hidden min-h-screen">
@@ -25,7 +53,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>
@@ -36,43 +64,31 @@
             </div>
           {/if}
 
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/price-alert"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+          {#if data?.getNews?.length !== 0}
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
             >
-              <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">
-                  Price Alert ⏰
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+              <div class="p-4 text-sm">
+                <h3 class="text-lg text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-gray-200">
+                  {#each data?.getNews?.slice(0, 10) as item}
+                    <li class="mb-3 last:mb-1">
+                      {formatDate(item?.publishedDate)} ago -
+                      <a
+                        class="sm:hover:text-white text-blue-400"
+                        href={item?.url}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow">{item?.title}</a
+                      >
+                      - {item?.site}
+                    </li>
+                  {/each}
+                </ul>
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Stock Screener 🔎
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
-          </div>
+            </div>
+          {/if}
         </aside>
       </div>
     </div>
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 6ed1653c..85c6bdb9 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
-  import { page } from "$app/stores";
+  import { stockTicker, screenWidth, coolMode } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
+  import { page } from "$app/stores";
+  export let data;
   let displaySubSection = "income";
 
   function changeSubSection(state) {
@@ -43,93 +45,165 @@
   }
 </script>
 
-<section class="w-auto bg-[#09090B] overflow-hidden h-full">
-  <div class="m-auto h-full overflow-hidden">
-    <main class="w-full">
-      <div class="m-auto">
-        <div
-          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
-            ? 'overflow-auto scrollbar'
-            : 'no-scrollbar'} mb-2"
-        >
-          <ul
-            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
-          >
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/financials`}
-                on:click={() => changeSubSection("income")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'income'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
+<section class="w-full overflow-hidden min-h-screen">
+  <div class="w-full overflow-hidden m-auto">
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
+      <div
+        class="relative flex justify-center items-start overflow-hidden w-full"
+      >
+        <main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'}  ">
+          <div class="m-auto">
+            <div
+              class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
+                ? 'overflow-auto scrollbar'
+                : 'no-scrollbar'} mb-2"
+            >
+              <ul
+                class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
               >
-                Income
-              </a>
-              <div
-                class="{displaySubSection === 'income'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-              />
-            </li>
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/financials/balance-sheet`}
-                on:click={() => changeSubSection("balance-sheet")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'balance-sheet'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Balance Sheet
-              </a>
-              <div
-                class="{displaySubSection === 'balance-sheet'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-              />
-            </li>
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/financials/cash-flow`}
-                on:click={() => changeSubSection("cash-flow")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'cash-flow'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Cashflow
-              </a>
-              <div
-                class="{displaySubSection === 'cash-flow'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-              />
-            </li>
+                <li class="cursor-pointer flex flex-col items-center">
+                  <a
+                    href={`/stocks/${$stockTicker}/financials`}
+                    on:click={() => changeSubSection("income")}
+                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                    'income'
+                      ? 'text-white '
+                      : 'bg-[#09090B]'}"
+                  >
+                    Income
+                  </a>
+                  <div
+                    class="{displaySubSection === 'income'
+                      ? 'bg-[#75D377]'
+                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
+                  />
+                </li>
+                <li class="cursor-pointer flex flex-col items-center">
+                  <a
+                    href={`/stocks/${$stockTicker}/financials/balance-sheet`}
+                    on:click={() => changeSubSection("balance-sheet")}
+                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                    'balance-sheet'
+                      ? 'text-white '
+                      : 'bg-[#09090B]'}"
+                  >
+                    Balance Sheet
+                  </a>
+                  <div
+                    class="{displaySubSection === 'balance-sheet'
+                      ? 'bg-[#75D377]'
+                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
+                  />
+                </li>
+                <li class="cursor-pointer flex flex-col items-center">
+                  <a
+                    href={`/stocks/${$stockTicker}/financials/cash-flow`}
+                    on:click={() => changeSubSection("cash-flow")}
+                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                    'cash-flow'
+                      ? 'text-white '
+                      : 'bg-[#09090B]'}"
+                  >
+                    Cashflow
+                  </a>
+                  <div
+                    class="{displaySubSection === 'cash-flow'
+                      ? 'bg-[#75D377]'
+                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
+                  />
+                </li>
 
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/financials/ratios`}
-                on:click={() => changeSubSection("ratios")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'ratios'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Ratios
-              </a>
+                <li class="cursor-pointer flex flex-col items-center">
+                  <a
+                    href={`/stocks/${$stockTicker}/financials/ratios`}
+                    on:click={() => changeSubSection("ratios")}
+                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                    'ratios'
+                      ? 'text-white '
+                      : 'bg-[#09090B]'}"
+                  >
+                    Ratios
+                  </a>
+                  <div
+                    class="{displaySubSection === 'ratios'
+                      ? 'bg-[#75D377]'
+                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                  />
+                </li>
+              </ul>
+            </div>
+          </div>
+          <slot />
+        </main>
+
+        {#if $coolMode}
+          <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+            {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
               <div
-                class="{displaySubSection === 'ratios'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-              />
-            </li>
-          </ul>
-        </div>
+                class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+              >
+                <a
+                  href="/pricing"
+                  class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+                >
+                  <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
+                    </h2>
+                    <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                  </div>
+                  <span class="text-white p-3 ml-3 mr-3">
+                    Upgrade now for unlimited access to all data and tools.
+                  </span>
+                </a>
+              </div>
+            {/if}
+
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href={"/watchlist/stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <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">
+                    Watchlist
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Build your watchlist to keep track of your favorite stocks.
+                </span>
+              </a>
+            </div>
+
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href={"/analysts/top-stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <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 Stocks
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Get the latest top Wall Street Analyst Ratings
+                </span>
+              </a>
+            </div>
+          </aside>
+        {/if}
       </div>
-    </main>
-
-    <slot />
+    </div>
   </div>
 </section>
 
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 5b0f02d4..ab78a9f5 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -3,6 +3,7 @@
     numberOfUnreadNotification,
     displayCompanyName,
     stockTicker,
+    coolMode,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -28,7 +29,7 @@
   let filterRule = "annual";
   let displayStatement = "revenue";
 
-  let mode = false;
+  $coolMode = false;
   let timeFrame = "10Y";
 
   onMount(async () => {
@@ -141,7 +142,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -330,7 +331,7 @@
       }
       income = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -379,7 +380,7 @@
           <div class="sm:p-7 m-auto mt-2 sm:mt-0">
             <div class="mb-3">
               <h1 class="text-2xl text-gray-200 font-bold">
-                {#if mode}
+                {#if $coolMode}
                   {statementConfig?.find(
                     (item) => item?.propertyName === displayStatement,
                   )?.label}
@@ -405,7 +406,7 @@
                   /></svg
                 >
 
-                {#if mode}
+                {#if $coolMode}
                   {statementConfig?.find(
                     (item) => item?.propertyName === displayStatement,
                   )?.text}
@@ -471,14 +472,14 @@
                   <input
                     on:click={toggleMode}
                     type="checkbox"
-                    checked={mode}
-                    value={mode}
+                    checked={$coolMode}
+                    value={$coolMode}
                     class="sr-only peer"
                   />
                   <div
                     class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                   ></div>
-                  {#if mode}
+                  {#if $coolMode}
                     <span class="ml-2 text-sm font-medium text-white">
                       Cool Mode
                     </span>
@@ -565,7 +566,7 @@
                 </div>
               </div>
 
-              {#if mode}
+              {#if $coolMode}
                 <div class="sm:w-full">
                   <div class="relative">
                     <select
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
deleted file mode 100644
index c76e0980..00000000
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import { coolMode } from "$lib/store";
-
-  export let data;
-</script>
-
-<section class="w-full overflow-hidden min-h-screen">
-  <div class="w-full overflow-hidden m-auto">
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-      <div
-        class="relative flex justify-center items-start overflow-hidden w-full"
-      >
-        <main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'}  ">
-          <slot />
-        </main>
-
-        {#if $coolMode}
-          <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-            {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-              <div
-                class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-              >
-                <a
-                  href="/pricing"
-                  class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-                >
-                  <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 🔥
-                    </h2>
-                    <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                  </div>
-                  <span class="text-white p-3 ml-3 mr-3">
-                    Upgrade now for unlimited access to all data and tools.
-                  </span>
-                </a>
-              </div>
-            {/if}
-
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/price-alert"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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">
-                    Price Alert ⏰
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Customize your alerts to never miss out again
-                </span>
-              </a>
-            </div>
-
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/stock-screener"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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">
-                    Stock Screener 🔎
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Build your Stock Screener to find profitable stocks.
-                </span>
-              </a>
-            </div>
-          </aside>
-        {/if}
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index 1a00b3fc..edd62d76 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -2,6 +2,7 @@
   import {
     numberOfUnreadNotification,
     displayCompanyName,
+    coolMode,
     stockTicker,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
@@ -25,7 +26,7 @@
   let filterRule = "annual";
   let displayStatement = "netIncome";
 
-  let mode = false;
+  $coolMode = false;
   let tableList = [];
 
   let timeFrame = "10Y";
@@ -160,7 +161,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -351,7 +352,7 @@
 
       cashFlow = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -404,7 +405,7 @@
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
             <h1 class="text-2xl text-gray-200 font-bold">
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.label}
@@ -428,7 +429,7 @@
                 /></svg
               >
 
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.text}
@@ -494,14 +495,14 @@
                 <input
                   on:click={toggleMode}
                   type="checkbox"
-                  checked={mode}
-                  value={mode}
+                  checked={$coolMode}
+                  value={$coolMode}
                   class="sr-only peer"
                 />
                 <div
                   class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                 ></div>
-                {#if mode}
+                {#if $coolMode}
                   <span class="ml-2 text-sm font-medium text-white">
                     Cool Mode
                   </span>
@@ -588,7 +589,7 @@
               </div>
             </div>
 
-            {#if mode}
+            {#if $coolMode}
               <div class="sm:w-full">
                 <div class="relative">
                   <select
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index b79994b5..46e0a9fa 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -4,6 +4,7 @@
     numberOfUnreadNotification,
     displayCompanyName,
     stockTicker,
+    coolMode,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -27,7 +28,7 @@
 
   let displayStatement = "priceEarningsRatio";
 
-  let mode = false;
+  $coolMode = false;
   let timeFrame = "10Y";
 
   const statementConfig = [
@@ -124,7 +125,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -314,7 +315,7 @@
 
       ratios = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -368,7 +369,7 @@
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
             <h1 class="text-2xl text-gray-200 font-bold">
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.label}
@@ -392,7 +393,7 @@
                 /></svg
               >
 
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.text}
@@ -458,14 +459,14 @@
                 <input
                   on:click={toggleMode}
                   type="checkbox"
-                  checked={mode}
-                  value={mode}
+                  checked={$coolMode}
+                  value={$coolMode}
                   class="sr-only peer"
                 />
                 <div
                   class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                 ></div>
-                {#if mode}
+                {#if $coolMode}
                   <span class="ml-2 text-sm font-medium text-white">
                     Cool Mode
                   </span>
@@ -552,7 +553,7 @@
               </div>
             </div>
 
-            {#if mode}
+            {#if $coolMode}
               <div class="sm:w-full">
                 <div class="relative">
                   <select
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 39de440e..95c753ce 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -1,9 +1,38 @@
 <script lang="ts">
   import { stockTicker, screenWidth } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   import { page } from "$app/stores";
 
   export let data;
 
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
+
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
+
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
+
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
+
   let displaySubSection = "";
 
   if (!displaySubSection || displaySubSection.length === 0) {
@@ -39,73 +68,127 @@
   }
 </script>
 
-<section class="w-full bg-[#09090B] overflow-hidden h-full">
-  <div class="h-full overflow-hidden w-full">
-    <main class="w-full">
+<section class="w-auto overflow-hidden min-h-screen">
+  <div class="w-full overflow-hidden m-auto">
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
-        class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
-          ? 'overflow-auto scrollbar no-scrollbar'
-          : ''} mb-2"
+        class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <ul
-          class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
-        >
-          <li class="cursor-pointer flex flex-col items-center">
-            <a
-              href={`/stocks/${$stockTicker}/insider`}
-              on:click={() => changeSubSection("insider")}
-              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-              'insider'
-                ? 'text-white '
-                : 'bg-[#09090B]'}"
+        <main class="w-full lg:w-3/4">
+          <div
+            class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
+              ? 'overflow-auto scrollbar no-scrollbar'
+              : ''} mb-2"
+          >
+            <ul
+              class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
             >
-              Insider Trading
-            </a>
-            <div
-              class="{displaySubSection === 'insider'
-                ? 'bg-[#75D377]'
-                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
-            />
-          </li>
-          <li class="cursor-pointer flex flex-col items-center">
-            <a
-              href={`/stocks/${$stockTicker}/insider/congress-trading`}
-              on:click={() => changeSubSection("congress-trading")}
-              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-              'congress-trading'
-                ? 'text-white '
-                : 'bg-[#09090B]'}"
-            >
-              Congress Trading
-            </a>
-            <div
-              class="{displaySubSection === 'congress-trading'
-                ? 'bg-[#75D377]'
-                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
-            />
-          </li>
-          <li class="cursor-pointer flex flex-col items-center">
-            <a
-              href={`/stocks/${$stockTicker}/insider/transcripts`}
-              on:click={() => changeSubSection("transcripts")}
-              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-              'transcripts'
-                ? 'text-white '
-                : 'bg-[#09090B]'}"
-            >
-              Transcripts
-            </a>
-            <div
-              class="{displaySubSection === 'transcripts'
-                ? 'bg-[#75D377]'
-                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-            />
-          </li>
-        </ul>
-      </div>
-    </main>
+              <li class="cursor-pointer flex flex-col items-center">
+                <a
+                  href={`/stocks/${$stockTicker}/insider`}
+                  on:click={() => changeSubSection("insider")}
+                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                  'insider'
+                    ? 'text-white '
+                    : 'bg-[#09090B]'}"
+                >
+                  Insider Trading
+                </a>
+                <div
+                  class="{displaySubSection === 'insider'
+                    ? 'bg-[#75D377]'
+                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
+                />
+              </li>
+              <li class="cursor-pointer flex flex-col items-center">
+                <a
+                  href={`/stocks/${$stockTicker}/insider/congress-trading`}
+                  on:click={() => changeSubSection("congress-trading")}
+                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                  'congress-trading'
+                    ? 'text-white '
+                    : 'bg-[#09090B]'}"
+                >
+                  Congress Trading
+                </a>
+                <div
+                  class="{displaySubSection === 'congress-trading'
+                    ? 'bg-[#75D377]'
+                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
+                />
+              </li>
+              <li class="cursor-pointer flex flex-col items-center">
+                <a
+                  href={`/stocks/${$stockTicker}/insider/transcripts`}
+                  on:click={() => changeSubSection("transcripts")}
+                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                  'transcripts'
+                    ? 'text-white '
+                    : 'bg-[#09090B]'}"
+                >
+                  Transcripts
+                </a>
+                <div
+                  class="{displaySubSection === 'transcripts'
+                    ? 'bg-[#75D377]'
+                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
+                />
+              </li>
+            </ul>
+          </div>
+          <slot />
+        </main>
 
-    <slot />
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href="/pricing"
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <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
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Upgrade now for unlimited access to all data and tools.
+                </span>
+              </a>
+            </div>
+          {/if}
+
+          {#if data?.getNews?.length !== 0}
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <div class="p-4 text-sm">
+                <h3 class="text-lg text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-gray-200">
+                  {#each data?.getNews?.slice(0, 10) as item}
+                    <li class="mb-3 last:mb-1">
+                      {formatDate(item?.publishedDate)} ago -
+                      <a
+                        class="sm:hover:text-white text-blue-400"
+                        href={item?.url}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow">{item?.title}</a
+                      >
+                      - {item?.site}
+                    </li>
+                  {/each}
+                </ul>
+              </div>
+            </div>
+          {/if}
+        </aside>
+      </div>
+    </div>
   </div>
 </section>
 
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte
deleted file mode 100644
index 49d20375..00000000
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-
-  export let data;
-</script>
-
-<section class="w-full overflow-hidden min-h-screen">
-  <div class="w-full overflow-hidden m-auto">
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-      <div
-        class="relative flex justify-center items-start overflow-hidden w-full"
-      >
-        <main class="w-full lg:w-3/4">
-          <slot />
-        </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href="/pricing"
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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 🔥
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/price-alert"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Price Alert ⏰
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Stock Screener 🔎
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
-          </div>
-        </aside>
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index 49d20375..8956036b 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -40,17 +40,17 @@
             class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
-              href={"/price-alert"}
+              href={"/options-flow"}
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <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">
-                  Price Alert ⏰
+                  Options Flow
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
+                Get realtime options flow and customize your screener
               </span>
             </a>
           </div>
@@ -64,7 +64,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">
-                  Stock Screener 🔎
+                  Stock Screener
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>