From 9162be773c7e610d4536b99912a686603a756e62 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 16 Nov 2024 21:33:04 +0100
Subject: [PATCH] bugfixing market mover page

---
 src/routes/market-mover/+layout.server.ts     |   7 +-
 src/routes/market-mover/active/+layout.svelte | 167 ++++++++++++++++++
 src/routes/market-mover/active/+page.svelte   |  24 +++
 .../market-mover/active/3Y/+page.svelte       |  24 +++
 .../market-mover/active/5Y/+page.svelte       |  24 +++
 .../market-mover/active/month/+page.svelte    |  24 +++
 .../market-mover/active/week/+page.svelte     |  24 +++
 .../market-mover/active/year/+page.svelte     |  24 +++
 .../+page.svelte => gainers/+layout.svelte}   | 109 ++++--------
 src/routes/market-mover/gainers/+page.svelte  |  24 +++
 .../market-mover/gainers/3Y/+page.svelte      |  24 +++
 .../market-mover/gainers/5Y/+page.svelte      |  24 +++
 .../market-mover/gainers/month/+page.svelte   |  24 +++
 .../market-mover/gainers/week/+page.svelte    |  24 +++
 .../market-mover/gainers/year/+page.svelte    |  24 +++
 src/routes/market-mover/losers/+layout.svelte | 167 ++++++++++++++++++
 src/routes/market-mover/losers/+page.svelte   |  24 +++
 .../market-mover/losers/3Y/+page.svelte       |  24 +++
 .../market-mover/losers/5Y/+page.svelte       |  24 +++
 .../market-mover/losers/month/+page.svelte    |  24 +++
 .../market-mover/losers/week/+page.svelte     |  24 +++
 .../market-mover/losers/year/+page.svelte     |  24 +++
 22 files changed, 805 insertions(+), 77 deletions(-)
 create mode 100644 src/routes/market-mover/active/+layout.svelte
 create mode 100644 src/routes/market-mover/active/+page.svelte
 create mode 100644 src/routes/market-mover/active/3Y/+page.svelte
 create mode 100644 src/routes/market-mover/active/5Y/+page.svelte
 create mode 100644 src/routes/market-mover/active/month/+page.svelte
 create mode 100644 src/routes/market-mover/active/week/+page.svelte
 create mode 100644 src/routes/market-mover/active/year/+page.svelte
 rename src/routes/market-mover/{[slug]/+page.svelte => gainers/+layout.svelte} (65%)
 create mode 100644 src/routes/market-mover/gainers/+page.svelte
 create mode 100644 src/routes/market-mover/gainers/3Y/+page.svelte
 create mode 100644 src/routes/market-mover/gainers/5Y/+page.svelte
 create mode 100644 src/routes/market-mover/gainers/month/+page.svelte
 create mode 100644 src/routes/market-mover/gainers/week/+page.svelte
 create mode 100644 src/routes/market-mover/gainers/year/+page.svelte
 create mode 100644 src/routes/market-mover/losers/+layout.svelte
 create mode 100644 src/routes/market-mover/losers/+page.svelte
 create mode 100644 src/routes/market-mover/losers/3Y/+page.svelte
 create mode 100644 src/routes/market-mover/losers/5Y/+page.svelte
 create mode 100644 src/routes/market-mover/losers/month/+page.svelte
 create mode 100644 src/routes/market-mover/losers/week/+page.svelte
 create mode 100644 src/routes/market-mover/losers/year/+page.svelte

diff --git a/src/routes/market-mover/+layout.server.ts b/src/routes/market-mover/+layout.server.ts
index 60c1f517..0a4e2fea 100644
--- a/src/routes/market-mover/+layout.server.ts
+++ b/src/routes/market-mover/+layout.server.ts
@@ -1,4 +1,4 @@
-export const load = async ({ locals, params }) => {
+export const load = async ({ locals }) => {
   const { apiURL, apiKey } = locals;
 
   const getMarketMover = async () => {
@@ -14,12 +14,9 @@ export const load = async ({ locals, params }) => {
 
     return output;
   };
-  const getParams = async () => {
-    return params.slug;
-  };
+
 
   return {
     getMarketMover: await getMarketMover(),
-    getParams: await getParams(),
   };
 };
diff --git a/src/routes/market-mover/active/+layout.svelte b/src/routes/market-mover/active/+layout.svelte
new file mode 100644
index 00000000..9a76b058
--- /dev/null
+++ b/src/routes/market-mover/active/+layout.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { numberOfUnreadNotification } from "$lib/store";
+  import { getLastTradingDay } from "$lib/utils";
+  import { page } from "$app/stores";
+
+  import InfoModal from "$lib/components/InfoModal.svelte";
+
+  export let data;
+  const lastTradingDay = new Date(getLastTradingDay() ?? null)?.toLocaleString(
+    "en-US",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    },
+  );
+  const displayTitle = {
+    active: "title Today",
+    week: "Week title",
+    month: "Month title",
+    year: "1 Year title",
+    "3Y": "3 Year title",
+    "5Y": "5 Year title",
+  };
+
+  let timePeriod;
+
+  let title = "Active";
+
+  $: {
+    const pathSegments = $page.url.pathname.split("/");
+    timePeriod = pathSegments[pathSegments.length - 1];
+  }
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
+    Top Stock {title} · stocknear
+  </title>
+  <meta
+    name="description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`Today's Top Stock ${title} · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`Today's Top Stock ${title} · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full overflow-hidden m-auto min-h-screen">
+  <div class="flex justify-center w-full m-auto overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <main class="w-full">
+        <!--Start Top Winners/active-->
+
+        <nav class=" pt-1 overflow-x-scroll whitespace-nowrap">
+          <ul
+            class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
+          >
+            <a
+              href="/market-mover/active"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'active'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Today
+            </a>
+            <a
+              href="/market-mover/active/week"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'week'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Week
+            </a>
+            <a
+              href="/market-mover/active/month"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'month'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Month
+            </a>
+            <a
+              href="/market-mover/active/year"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'year'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Year
+            </a>
+            <a
+              href="/market-mover/active/3Y"
+              class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              3 Years
+            </a>
+            <a
+              href="/market-mover/active/5Y"
+              class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              5 Years
+            </a>
+          </ul>
+        </nav>
+
+        <div
+          class="flex flex-col justify-center items-center overflow-hidden mt-10"
+        >
+          <div class="controls groups w-full">
+            <div
+              class="title-group flex flex-row items-center justify-start mb-3"
+            >
+              <h1 class="text-white text-xl sm:text-2xl font-semibold">
+                {displayTitle[timePeriod]?.replace("title", title)}
+              </h1>
+              {#if timePeriod === "1D" && ["active", "active"]?.includes(title)}
+                <InfoModal
+                  title={`${title} Today`}
+                  content={`The stocks with the highest percentage ${title === "active" ? "gains" : "loss"} today, updated every two minutes during market open. Excludes stocks with a market cap under 10M and volume under 50K.`}
+                  id={"marketmoverId"}
+                />
+              {/if}
+
+              <div
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+              >
+                <span class="hidden lg:inline">Updated</span>
+                {lastTradingDay}
+              </div>
+            </div>
+          </div>
+          <slot />
+        </div>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/market-mover/active/+page.svelte b/src/routes/market-mover/active/+page.svelte
new file mode 100644
index 00000000..b7339584
--- /dev/null
+++ b/src/routes/market-mover/active/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["1D"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/active/3Y/+page.svelte b/src/routes/market-mover/active/3Y/+page.svelte
new file mode 100644
index 00000000..3ae139ff
--- /dev/null
+++ b/src/routes/market-mover/active/3Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["3Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/active/5Y/+page.svelte b/src/routes/market-mover/active/5Y/+page.svelte
new file mode 100644
index 00000000..26db1a19
--- /dev/null
+++ b/src/routes/market-mover/active/5Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["5Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/active/month/+page.svelte b/src/routes/market-mover/active/month/+page.svelte
new file mode 100644
index 00000000..234144fd
--- /dev/null
+++ b/src/routes/market-mover/active/month/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["1M"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/active/week/+page.svelte b/src/routes/market-mover/active/week/+page.svelte
new file mode 100644
index 00000000..4b04d464
--- /dev/null
+++ b/src/routes/market-mover/active/week/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["1W"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/active/year/+page.svelte b/src/routes/market-mover/active/year/+page.svelte
new file mode 100644
index 00000000..90252fc4
--- /dev/null
+++ b/src/routes/market-mover/active/year/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.active["1Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/[slug]/+page.svelte b/src/routes/market-mover/gainers/+layout.svelte
similarity index 65%
rename from src/routes/market-mover/[slug]/+page.svelte
rename to src/routes/market-mover/gainers/+layout.svelte
index c378ae48..be004ad3 100644
--- a/src/routes/market-mover/[slug]/+page.svelte
+++ b/src/routes/market-mover/gainers/+layout.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import { screenWidth, numberOfUnreadNotification } from "$lib/store";
-  import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
-  import TableHeader from "$lib/components/Table/TableHeader.svelte";
-  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
-  import InfoModal from "$lib/components/InfoModal.svelte";
-  import Table from "$lib/components/Table/Table.svelte";
+  import { numberOfUnreadNotification } from "$lib/store";
+  import { getLastTradingDay } from "$lib/utils";
+  import { page } from "$app/stores";
+
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
-  import { afterUpdate } from "svelte";
   export let data;
-  let timePeriod = "1D";
   const lastTradingDay = new Date(getLastTradingDay() ?? null)?.toLocaleString(
     "en-US",
     {
@@ -18,49 +15,22 @@
     },
   );
   const displayTitle = {
-    "1D": "title Today",
-    "1W": "Week title",
-    "1M": "Month title",
-    "1Y": "1 Year title",
+    gainers: "title Today",
+    week: "Week title",
+    month: "Month title",
+    year: "1 Year title",
     "3Y": "3 Year title",
     "5Y": "5 Year title",
   };
-  let rawData = data?.getMarketMover[data?.getParams];
 
-  const excludedRules = new Set([
-    "volume",
-    "price",
-    "changesPercentage",
-    "eps",
-    "marketCap",
-  ]);
+  let timePeriod;
 
-  const defaultList = [
-    { name: "Market Cap", rule: "marketCap" },
-    { name: "Price", rule: "price" },
-    { name: "% Change", rule: "changesPercentage" },
-    { name: "Volume", rule: "volume" },
-  ];
+  let title = "Gainers";
 
-  function selectTimeInterval(state) {
-    timePeriod = state;
+  $: {
+    const pathSegments = $page.url.pathname.split("/");
+    timePeriod = pathSegments[pathSegments.length - 1];
   }
-
-  let previousTimePeriod;
-  let previousPage = data?.getParams;
-  let title;
-
-  afterUpdate(() => {
-    if (timePeriod !== previousTimePeriod || previousPage !== data?.getParams) {
-      previousTimePeriod = timePeriod;
-      previousPage = data?.getParams;
-      rawData = data?.getMarketMover[data?.getParams];
-      title =
-        data?.getParams?.charAt(0)?.toUpperCase() + data?.getParams?.slice(1);
-    }
-  });
-
-  $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
 
 <svelte:head>
@@ -112,54 +82,54 @@
           <ul
             class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
           >
-            <li
-              on:click={() => selectTimeInterval("1D")}
-              class="p-2 px-5 cursor-pointer {timePeriod === '1D'
+            <a
+              href="/market-mover/gainers"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'gainers'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               Today
-            </li>
-            <li
-              on:click={() => selectTimeInterval("1W")}
-              class="p-2 px-5 cursor-pointer {timePeriod === '1W'
+            </a>
+            <a
+              href="/market-mover/gainers/week"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'week'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               Week
-            </li>
-            <li
-              on:click={() => selectTimeInterval("1M")}
-              class="p-2 px-5 cursor-pointer {timePeriod === '1M'
+            </a>
+            <a
+              href="/market-mover/gainers/month"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'month'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               Month
-            </li>
-            <li
-              on:click={() => selectTimeInterval("1Y")}
-              class="p-2 px-5 cursor-pointer {timePeriod === '1Y'
+            </a>
+            <a
+              href="/market-mover/gainers/year"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'year'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               Year
-            </li>
-            <li
-              on:click={() => selectTimeInterval("3Y")}
+            </a>
+            <a
+              href="/market-mover/gainers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               3 Years
-            </li>
-            <li
-              on:click={() => selectTimeInterval("5Y")}
+            </a>
+            <a
+              href="/market-mover/gainers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
                 ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
                 : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
             >
               5 Years
-            </li>
+            </a>
           </ul>
         </nav>
 
@@ -189,12 +159,7 @@
               </div>
             </div>
           </div>
-          <Table
-            {data}
-            rawData={rawData[timePeriod]}
-            {excludedRules}
-            {defaultList}
-          />
+          <slot />
         </div>
       </main>
     </div>
diff --git a/src/routes/market-mover/gainers/+page.svelte b/src/routes/market-mover/gainers/+page.svelte
new file mode 100644
index 00000000..053a5829
--- /dev/null
+++ b/src/routes/market-mover/gainers/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["1D"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/gainers/3Y/+page.svelte b/src/routes/market-mover/gainers/3Y/+page.svelte
new file mode 100644
index 00000000..70096ea3
--- /dev/null
+++ b/src/routes/market-mover/gainers/3Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["3Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/gainers/5Y/+page.svelte b/src/routes/market-mover/gainers/5Y/+page.svelte
new file mode 100644
index 00000000..11e17dcd
--- /dev/null
+++ b/src/routes/market-mover/gainers/5Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["5Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/gainers/month/+page.svelte b/src/routes/market-mover/gainers/month/+page.svelte
new file mode 100644
index 00000000..19c481b1
--- /dev/null
+++ b/src/routes/market-mover/gainers/month/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["1M"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/gainers/week/+page.svelte b/src/routes/market-mover/gainers/week/+page.svelte
new file mode 100644
index 00000000..17be203b
--- /dev/null
+++ b/src/routes/market-mover/gainers/week/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["1W"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/gainers/year/+page.svelte b/src/routes/market-mover/gainers/year/+page.svelte
new file mode 100644
index 00000000..502d85ea
--- /dev/null
+++ b/src/routes/market-mover/gainers/year/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.gainers["1Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/+layout.svelte b/src/routes/market-mover/losers/+layout.svelte
new file mode 100644
index 00000000..0d0cc396
--- /dev/null
+++ b/src/routes/market-mover/losers/+layout.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { numberOfUnreadNotification } from "$lib/store";
+  import { getLastTradingDay } from "$lib/utils";
+  import { page } from "$app/stores";
+
+  import InfoModal from "$lib/components/InfoModal.svelte";
+
+  export let data;
+  const lastTradingDay = new Date(getLastTradingDay() ?? null)?.toLocaleString(
+    "en-US",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    },
+  );
+  const displayTitle = {
+    losers: "title Today",
+    week: "Week title",
+    month: "Month title",
+    year: "1 Year title",
+    "3Y": "3 Year title",
+    "5Y": "5 Year title",
+  };
+
+  let timePeriod;
+
+  let title = "Losers";
+
+  $: {
+    const pathSegments = $page.url.pathname.split("/");
+    timePeriod = pathSegments[pathSegments.length - 1];
+  }
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
+    Top Stock {title} · stocknear
+  </title>
+  <meta
+    name="description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`Today's Top Stock ${title} · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`Today's Top Stock ${title} · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full overflow-hidden m-auto min-h-screen">
+  <div class="flex justify-center w-full m-auto overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <main class="w-full">
+        <!--Start Top Winners/Losers-->
+
+        <nav class=" pt-1 overflow-x-scroll whitespace-nowrap">
+          <ul
+            class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
+          >
+            <a
+              href="/market-mover/losers"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'losers'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Today
+            </a>
+            <a
+              href="/market-mover/losers/week"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'week'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Week
+            </a>
+            <a
+              href="/market-mover/losers/month"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'month'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Month
+            </a>
+            <a
+              href="/market-mover/losers/year"
+              class="p-2 px-5 cursor-pointer {timePeriod === 'year'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Year
+            </a>
+            <a
+              href="/market-mover/losers/3Y"
+              class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              3 Years
+            </a>
+            <a
+              href="/market-mover/losers/5Y"
+              class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              5 Years
+            </a>
+          </ul>
+        </nav>
+
+        <div
+          class="flex flex-col justify-center items-center overflow-hidden mt-10"
+        >
+          <div class="controls groups w-full">
+            <div
+              class="title-group flex flex-row items-center justify-start mb-3"
+            >
+              <h1 class="text-white text-xl sm:text-2xl font-semibold">
+                {displayTitle[timePeriod]?.replace("title", title)}
+              </h1>
+              {#if timePeriod === "1D" && ["losers", "Losers"]?.includes(title)}
+                <InfoModal
+                  title={`${title} Today`}
+                  content={`The stocks with the highest percentage ${title === "losers" ? "gains" : "loss"} today, updated every two minutes during market open. Excludes stocks with a market cap under 10M and volume under 50K.`}
+                  id={"marketmoverId"}
+                />
+              {/if}
+
+              <div
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+              >
+                <span class="hidden lg:inline">Updated</span>
+                {lastTradingDay}
+              </div>
+            </div>
+          </div>
+          <slot />
+        </div>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/market-mover/losers/+page.svelte b/src/routes/market-mover/losers/+page.svelte
new file mode 100644
index 00000000..2a90eca2
--- /dev/null
+++ b/src/routes/market-mover/losers/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["1D"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/3Y/+page.svelte b/src/routes/market-mover/losers/3Y/+page.svelte
new file mode 100644
index 00000000..316f326a
--- /dev/null
+++ b/src/routes/market-mover/losers/3Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["3Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/5Y/+page.svelte b/src/routes/market-mover/losers/5Y/+page.svelte
new file mode 100644
index 00000000..b3fb4652
--- /dev/null
+++ b/src/routes/market-mover/losers/5Y/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["5Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/month/+page.svelte b/src/routes/market-mover/losers/month/+page.svelte
new file mode 100644
index 00000000..43f4b425
--- /dev/null
+++ b/src/routes/market-mover/losers/month/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["1M"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/week/+page.svelte b/src/routes/market-mover/losers/week/+page.svelte
new file mode 100644
index 00000000..384b0d00
--- /dev/null
+++ b/src/routes/market-mover/losers/week/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["1W"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />
diff --git a/src/routes/market-mover/losers/year/+page.svelte b/src/routes/market-mover/losers/year/+page.svelte
new file mode 100644
index 00000000..d211d6e9
--- /dev/null
+++ b/src/routes/market-mover/losers/year/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  let rawData = data?.getMarketMover?.losers["1Y"];
+
+  let excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
+</script>
+
+<Table {data} {rawData} {excludedRules} {defaultList} />