From 2c3c638fe9c0d2b8ecdb7681a6170ed396f4e265 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 5 Apr 2025 12:44:32 +0200
Subject: [PATCH] ui fix

---
 src/routes/etf/+page.svelte                |    2 +-
 src/routes/options-calculator/+page.svelte | 1235 ++++----------------
 src/routes/potus-tracker/+page.svelte      |    2 +-
 3 files changed, 212 insertions(+), 1027 deletions(-)

diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 5f4cea1c..297dd866 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -30,7 +30,7 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div class=" border-b-[2px]">
+          <div class="border-b-[2px] border-[#2C6288] dark:border-white">
             <h1 class="mb-1 text-2xl sm:text-3xl font-bold">All ETF Symbols</h1>
             <p class="mb-3 px-1 font-semibold sm:px-0">
               List of all {rawData?.length} ETF symbols we support
diff --git a/src/routes/options-calculator/+page.svelte b/src/routes/options-calculator/+page.svelte
index e90c2643..4dcdc433 100644
--- a/src/routes/options-calculator/+page.svelte
+++ b/src/routes/options-calculator/+page.svelte
@@ -1,336 +1,35 @@
 <script lang="ts">
   import SEO from "$lib/components/SEO.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import highcharts from "$lib/highcharts.ts";
-  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
-  import { Button } from "$lib/components/shadcn/button/index.js";
-  import { sectorList } from "$lib/utils";
-  import avatar from "$lib/images/trump-avatar.jpeg";
-  import { mode } from "mode-watcher";
-  import { goto } from "$app/navigation";
-  import html2canvas from "html2canvas-pro";
 
   export let data;
 
-  let postContent = "n/a";
-  let postDate = "n/a";
-  let postUrl = "#";
-  let postTitle = "n/a";
-  let postSentiment = "n/a";
+  let selectedStrategy = "Long Call";
 
-  const updatedSectorList = ["S&P500", ...sectorList];
-
-  let rawData = data?.getData?.history || [];
-  let posts = data?.getData?.posts || [];
-  let executiveOrders = data?.getData?.executiveOrders || [];
-  let selectedSector = "S&P500";
-  const sectorDict = {
-    "S&P500": "SPY",
-    "Basic Materials": "XLB",
-    "Communication Services": "XLC",
-    Energy: "XLE",
-    "Financial Services": "XLF",
-    Industrials: "XLI",
-    Technology: "XLK",
-    "Consumer Defensive": "XLP",
-    "Real Estate": "XLRE",
-    Utilities: "XLU",
-    Healthcare: "XLV",
-    "Consumer Cyclical": "XLY",
-  };
-
-  const groupedByDate = rawData?.reduce((acc, item) => {
-    const dateKey = new Intl.DateTimeFormat("en-US", {
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      timeZone: "UTC",
-    }).format(new Date(item?.date));
-
-    if (!acc[dateKey]) acc[dateKey] = [];
-    acc[dateKey].push(item);
-    return acc;
-  }, {});
-
-  let groupedOrders = executiveOrders?.reduce((acc, item) => {
-    const dateKey = new Intl.DateTimeFormat("en-US", {
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      timeZone: "UTC",
-    }).format(new Date(item.date));
-
-    if (!acc[dateKey]) acc[dateKey] = [];
-    acc[dateKey].push(item);
-    return acc;
-  }, {});
-
-  const tabs = [
-    {
-      title: "Presidential Schedule",
-    },
-    {
-      title: "Executive Orders",
-    },
-    {
-      title: "Truth Social Post",
-    },
+  let strategies = [
+    { name: "Custom Strategy", sentiment: "" },
+    { name: "Long Call", sentiment: "Bullish" },
+    { name: "Long Put", sentiment: "Bearish" },
+    { name: "Short Call", sentiment: "Bearish" },
+    { name: "Short Put", sentiment: "Bullish" },
+    { name: "Covered Call", sentiment: "Bullish" },
+    { name: "Protective Put", sentiment: "Bullish" },
+    { name: "Cash Secured Put", sentiment: "Bullish" },
+    { name: "Bull Call Spread", sentiment: "Bullish" },
+    { name: "Bull Put Spread", sentiment: "Bullish" },
+    { name: "Bear Call Spread", sentiment: "Bearish" },
+    { name: "Bear Put Spread", sentiment: "Bearish" },
+    { name: "Collar", sentiment: "Neutral" },
+    { name: "Iron Condor", sentiment: "Neutral" },
+    { name: "Calendar Spread", sentiment: "Neutral" },
+    { name: "Covered Combination", sentiment: "Neutral" },
+    { name: "Long Call Butterfly", sentiment: "Neutral" },
+    { name: "Long Straddle", sentiment: "Neutral" },
+    { name: "Short Straddle", sentiment: "Neutral" },
   ];
-
-  let activeIdx = 0;
-  let expandedDescriptions: { [key: string]: boolean } = {};
-
-  function truncateText(text: string, maxLength: number = 300) {
-    if (text.length <= maxLength) return text;
-    return text.slice(0, maxLength) + "...";
-  }
-
-  function latestInfoDate(inputDate) {
-    // Create a Date object for the input date and convert it to New York time zone
-    const inputDateLocal = new Date(inputDate).toLocaleString("en-US", {
-      timeZone: "America/New_York",
-    });
-
-    // Get the current date and time in New York timezone
-    const todayLocal = new Date().toLocaleString("en-US", {
-      timeZone: "America/New_York",
-    });
-
-    // Convert the localized strings back to Date objects
-    const inputDateMs = new Date(inputDateLocal).getTime();
-    const todayMs = new Date(todayLocal).getTime();
-
-    // Calculate the difference in milliseconds
-    const differenceInMs = todayMs - inputDateMs;
-
-    // Convert milliseconds to days
-    const differenceInDays = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
-
-    // Return whether the difference is less than or equal to 1 day
-    return differenceInDays <= 2;
-  }
-
-  function plotData() {
-    // Transform raw data into arrays for Highcharts
-    const rawData =
-      data?.getData?.marketPerformance[sectorDict[selectedSector]];
-
-    // Convert data into arrays for Highcharts
-    const categories = Object.keys(rawData);
-    const values = Object.values(rawData);
-
-    const options = {
-      credits: {
-        enabled: false,
-      },
-      chart: {
-        type: "column",
-        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
-        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
-        height: 360,
-        animation: false,
-      },
-      title: {
-        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`,
-        style: {
-          color: $mode === "light" ? "black" : "white",
-        },
-        useHTML: true,
-      },
-      xAxis: {
-        categories: categories,
-        gridLineWidth: 0,
-        labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
-        },
-      },
-      yAxis: {
-        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
-        labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
-          formatter: function () {
-            return this.value + "%"; // Add percentage symbol
-          },
-        },
-        title: { text: null },
-        opposite: true,
-      },
-      tooltip: {
-        enabled: false,
-      },
-      plotOptions: {
-        series: {
-          color: $mode === "light" ? "black" : "white",
-          animation: false,
-          dataLabels: {
-            enabled: true,
-            color: $mode === "light" ? "black" : "white",
-            style: {
-              fontSize: "14px",
-              fontWeight: "normal",
-            },
-            formatter: function () {
-              return this.y.toFixed(2) + "%"; // Add percentage symbol
-            },
-          },
-        },
-      },
-      legend: {
-        enabled: false,
-      },
-      series: [
-        {
-          name: "Performance",
-          data: values,
-          zones: [
-            {
-              value: 0, // Values below 0
-              color: "#E02424", // Red
-              borderRadius: "0px",
-              borderColor: "#E02424", // Red border
-            },
-            {
-              color: "#10B981", // Green for values 0 and above
-              borderColor: "#10B981", // Green border
-              borderRadius: "0px",
-            },
-          ],
-        },
-      ],
-    };
-
-    return options;
-  }
-
-  let config = null;
-
-  async function captureScreenshot(index) {
-    const postElement = document.querySelector(`#post-${index}`);
-
-    // Clone the element to avoid modifying the original
-    const clonedElement = postElement.cloneNode(true);
-
-    // Create a temporary container for the clone with fixed dimensions and styling
-    const tempContainer = document.createElement("div");
-    tempContainer.style.position = "absolute";
-    tempContainer.style.left = "-9999px";
-    tempContainer.style.top = "0";
-    tempContainer.appendChild(clonedElement);
-    document.body.appendChild(tempContainer);
-
-    // Force light mode styling explicitly
-    clonedElement.style.cssText =
-      "background-color: white !important; color: black !important;";
-
-    // Process all elements recursively to ensure text visibility
-    function forceVisibleText(element) {
-      // Apply styles directly
-      element.style.cssText +=
-        "; color: black !important; background-color: white !important; border-color: #ccc !important;";
-
-      // For SVG elements, ensure they're visible
-      if (
-        element.tagName.toLowerCase() === "svg" ||
-        element.tagName.toLowerCase() === "path"
-      ) {
-        element.style.cssText +=
-          "; fill: #333 !important; stroke: #333 !important;";
-      }
-
-      // Remove problematic classes completely instead of just removing dark: prefix
-      if (element.classList) {
-        const classesToRemove = [];
-        element.classList.forEach((cls) => {
-          if (
-            cls.includes("dark:") ||
-            cls.includes("text-gray") ||
-            cls.includes("text-white")
-          ) {
-            classesToRemove.push(cls);
-          }
-        });
-        classesToRemove.forEach((cls) => element.classList.remove(cls));
-
-        // Add explicit light mode classes
-        element.classList.add("text-black");
-      }
-
-      // Process all child elements
-      if (element.children && element.children.length > 0) {
-        Array.from(element.children).forEach((child) =>
-          forceVisibleText(child),
-        );
-      }
-    }
-
-    // Apply the text visibility fix to all elements
-    forceVisibleText(clonedElement);
-
-    // Additional specific fixes for elements that might still have issues
-    const allTextElements = clonedElement.querySelectorAll(
-      "p, h1, h2, h3, h4, h5, span, a, div, label",
-    );
-    allTextElements.forEach((el) => {
-      el.style.color = "black";
-      el.setAttribute(
-        "style",
-        el.getAttribute("style") + "; color: black !important;",
-      );
-    });
-
-    // Convert any CSS variables that might affect color
-    const computed = window.getComputedStyle(postElement);
-    const cssText =
-      ":root { --text-color: black !important; --background-color: white !important; }";
-    const style = document.createElement("style");
-    style.textContent = cssText;
-    clonedElement.appendChild(style);
-
-    // Wait a bit to ensure styles are applied
-    await new Promise((resolve) => setTimeout(resolve, 50));
-
-    // Capture screenshot
-    try {
-      const canvas = await html2canvas(clonedElement, {
-        backgroundColor: "white",
-        logging: true, // Enable logging to help debug
-        scale: 2, // Higher quality
-        useCORS: true,
-        allowTaint: true,
-        removeContainer: false, // Handle cleanup ourselves
-      });
-
-      // Convert to image
-      const image = canvas.toDataURL("image/png");
-
-      // Create a download link
-      const link = document.createElement("a");
-      link.href = image;
-      link.download = `post-${index}.png`;
-      document.body.appendChild(link);
-      link.click();
-
-      // Clean up
-      document.body.removeChild(link);
-      document.body.removeChild(tempContainer);
-
-      return image;
-    } catch (error) {
-      console.error("Screenshot capture failed:", error);
-      document.body.removeChild(tempContainer);
-      throw error;
-    }
-  }
-  $: {
-    if (selectedSector || $mode) {
-      config = plotData() || null;
-    }
-  }
 </script>
 
 <SEO
-  title="POTUS Tracker: Real-Time Presidential Schedule, Executive Orders & Legislation"
+  title="Options Calculator: Real-Time Presidential Schedule, Executive Orders & Legislation"
   description="Track the President of the United States in real-time. Get updates on the POTUS schedule, executive orders, signed legislation, and official events."
 />
 
@@ -340,7 +39,7 @@
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
-      <li class="text-muted dark:text-gray-300">POTUS Tracker</li>
+      <li class="text-muted dark:text-gray-300">Options Calculator</li>
     </ul>
   </div>
 
@@ -352,574 +51,208 @@
         class="relative flex flex-row justify-center items-start overflow-hidden w-full"
       >
         <div class="w-full mt-5">
-          <div class="lg:float-left lg:w-[calc(100%-336px-20px)]">
-            <div class=" border-b-[2px]">
-              <h1 class="mb-1 text-2xl sm:text-3xl font-bold">POTUS Tracker</h1>
+          <div class="w-full">
+            <div class="border-b-[2px] border-[#2C6288] dark:border-white">
+              <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
+                Options Calculator
+              </h1>
             </div>
           </div>
 
-          <div class=" lg:float-left lg:w-[calc(100%-336px-40px)]">
-            <div class="mt-5 mb-5">
-              <Infobox
-                text={`Since the inauguration of Donald J. Trump on January 20, 2025, the 
-  ${selectedSector} has ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "text-green-800 dark:text-[#00FC50] before:content-['+']" : "text-red-800 dark:text-[#FF2F1F]"}">
-  ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] ?? "n/a"}%</span>.`}
-              />
-            </div>
-
-            <div class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0">
-              <div class="relative inline-block text-left grow">
-                <DropdownMenu.Root>
-                  <DropdownMenu.Trigger asChild let:builder>
-                    <Button
-                      builders={[builder]}
-                      class="shadow-sm w-full border-gray-300 dark:border-gray-600 border bg-white sm:hover:bg-gray-100 dark:bg-default dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
-                    >
-                      <span class="truncate">{selectedSector}</span>
-                      <svg
-                        class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        style="max-width:40px"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                          clip-rule="evenodd"
-                        ></path>
-                      </svg>
-                    </Button>
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content
-                    class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                  >
-                    <DropdownMenu.Label
-                      class="text-muted dark:text-muted dark:text-gray-300"
-                    >
-                      Select Sector
-                    </DropdownMenu.Label>
-                    <DropdownMenu.Separator />
-                    <DropdownMenu.Group>
-                      {#each updatedSectorList as sector}
-                        {#if sector === "S&P500" || ["Pro", "Plus"]?.includes(data?.user?.tier)}
-                          <DropdownMenu.Item
-                            on:click={() => (selectedSector = sector)}
-                            class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
-                          >
-                            {sector}
-                          </DropdownMenu.Item>
-                        {:else}
-                          <DropdownMenu.Item
-                            on:click={() => goto("/pricing")}
-                            class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
-                          >
-                            {sector}
-                            <svg
-                              class="ml-1 size-4"
-                              viewBox="0 0 20 20"
-                              fill="currentColor"
-                              style="max-width: 40px;"
-                            >
-                              <path
-                                fill-rule="evenodd"
-                                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                                clip-rule="evenodd"
-                              >
-                              </path>
-                            </svg>
-                          </DropdownMenu.Item>
-                        {/if}
-                      {/each}
-                    </DropdownMenu.Group>
-                  </DropdownMenu.Content>
-                </DropdownMenu.Root>
-              </div>
-            </div>
-
-            <div
-              class="chart mt-5 border border-gray-300 dark:border-gray-800 rounded"
-              use:highcharts={config}
-            ></div>
-
-            <nav
-              class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar mt-4"
-            >
-              <ul class="flex flex-row items-center w-full text-[1rem]">
-                {#each tabs as item, i}
-                  <button
-                    on:click={() => (activeIdx = i)}
-                    class="p-2 px-5 cursor-pointer {activeIdx === i
-                      ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
-                      : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
-                  >
-                    {item.title}
-                  </button>
-                {/each}
-              </ul>
-            </nav>
-
-            {#if activeIdx === 0}
-              <h3
-                class=" text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
-              >
-                Official Presidential Schedule
-              </h3>
-              <div
-                class="border border-gray-300 dark:border-gray-800 rounded-md p-4"
-              >
-                <div class="space-y-4">
-                  {#each Object?.entries(groupedByDate) as [date, items], indexA}
-                    <div class="my-4">
-                      <div
-                        class="border-b border-gray-300 dark:border-gray-600 pb-2 w-full flex flex-row items-center justify-between"
-                      >
-                        <span class="text-[1rem] sm:text-lg font-semibold">
-                          {date}</span
-                        >
-                        {#if items?.at(0)?.changesPercentage}
-                          <div class="ml-auto text-sm">
-                            <span class="inline-block">S&P500</span>
-                            <span
-                              class="{items?.at(0)?.changesPercentage > 0
-                                ? "text-green-800 dark:text-[#00FC50] before:content-['+']"
-                                : 'text-red-800 dark:text-[#FF2F1F]'} "
-                              >{items.length > 0
-                                ? items?.at(0)?.changesPercentage
-                                : "n/a"}%</span
-                            >
-                          </div>
-                        {/if}
-                      </div>
-                      <!-- Display date -->
-                      <br />
-                      {#each items as item, indexB}
-                        <div class="flex flex-col items-start space-y-1 mb-6">
-                          <div class="flex flex-row items-center space-x-2">
-                            <div class="relative">
-                              <svg
-                                fill={indexA === 0 && indexB === 0
-                                  ? "#2E86DE"
-                                  : "#808080"}
-                                class="w-5 h-5 relative z-10"
-                                viewBox="-51.2 -51.2 614.40 614.40"
-                                id="_78_Circle-Full"
-                                xmlns="http://www.w3.org/2000/svg"
-                                stroke={indexA === 0 && indexB === 0
-                                  ? "#2E86DE"
-                                  : "#808080"}
-                                stroke-width="0.00512"
-                              >
-                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                <g
-                                  id="SVGRepo_tracerCarrier"
-                                  stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                  stroke="#CCCCCC"
-                                  stroke-width="24.576"
-                                ></g>
-                                <g id="SVGRepo_iconCarrier">
-                                  <path
-                                    id="Path_111"
-                                    data-name="Path 111"
-                                    d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
-                                    fill-rule="evenodd"
-                                  ></path>
-                                </g>
-                              </svg>
-
-                              {#if indexA === 0 && indexB === 0}
-                                <span
-                                  class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
-                                ></span>
-                              {/if}
-                            </div>
-
-                            <span
-                              class="text-sm sm:text-[1rem] text-muted dark:text-gray-400"
-                            >
-                              {item.time_formatted}
-                              {item.location !== null
-                                ? `- ${item?.location}`
-                                : ""}
-                            </span>
-                          </div>
-
-                          <span class="text-sm sm:text-[1rem] ml-7">
-                            {item.details}
-                          </span>
-                        </div>
-                      {/each}
-                    </div>
-                  {/each}
-                </div>
-              </div>
-            {:else if activeIdx === 1}
-              <h3
-                class=" text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
-              >
-                Executive Actions
-              </h3>
-              <div
-                class=" border border-gray-300 dark:border-gray-800 rounded-md p-4"
-              >
-                <div class="space-y-4">
-                  {#each Object.entries(groupedOrders) as [date, items], indexA}
-                    <div class="my-4">
-                      <div
-                        class="border-b border-gray-300 dark:border-gray-600 pb-2 flex flex-row items-center"
-                      >
-                        <span class="text-[1rem] font-semibold">{date}</span>
-                        {#if latestInfoDate(date)}
-                          <label
-                            class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
-                            >New</label
-                          >
-                        {/if}
-                      </div>
-                      <br />
-
-                      {#each items as item, indexB}
-                        <!-- Card container -->
-                        <div
-                          class="{indexB > 0
-                            ? 'my-4'
-                            : 'my-1'} p-4 rounded-lg border border-gray-300 dark:border-gray-700 shadow-sm bg-white dark:bg-[#111315]"
-                        >
-                          <!-- Top row: avatar + user info -->
-                          <div class="flex items-start space-x-3">
-                            <a
-                              href="https://truthsocial.com/@realDonaldTrump"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              class="w-10 h-10 rounded-full shrink-0"
-                            >
-                              <img
-                                class="rounded-full"
-                                src={avatar}
-                                alt="Trump Image"
-                                loading="lazy"
-                              />
-                            </a>
-
-                            <div class="flex flex-col items-start w-full">
-                              <h3
-                                class="font-semibold text-gray-900 dark:text-white"
-                              >
-                                <span>Donald J. Trump</span>
-                              </h3>
-                              <h4
-                                class="text-sm text-gray-800 dark:text-gray-400"
-                              >
-                                <div>
-                                  {item?.title}
-                                  <!-- Sentiment badge -->
-                                  <div
-                                    class={`mt-2 px-3 py-1 rounded  text-xs sm:text-sm w-fit
-                ${
-                  item?.sentiment === "Bullish"
-                    ? "bg-emerald-500 text-white"
-                    : item?.sentiment === "Bearish"
-                      ? "bg-red-600 text-white"
-                      : "bg-gray-300 text-black"
-                }`}
-                                  >
-                                    {item?.sentiment}
-                                  </div>
-                                </div>
-                              </h4>
-                            </div>
-                          </div>
-
-                          <!-- Description -->
-                          <div class="mt-2 w-full">
-                            <span
-                              class="text-md text-gray-800 dark:text-gray-300"
-                            >
-                              {item?.description?.length > 300
-                                ? item?.description?.slice(0, 300) + "..."
-                                : item?.description}
-                            </span>
-                          </div>
-
-                          <div
-                            class="border-b border-gray-300 dark:border-gray-800 mt-4 mb-4"
-                          ></div>
-
-                          <!-- Source link -->
-                          <div class="flex flex-row items-center w-full">
-                            <a
-                              href={item?.link}
-                              rel="noopener noreferrer"
-                              target="_blank"
-                            >
-                              <svg
-                                class="w-5 h-5 text-gray-600 dark:text-gray-300"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                ><g id="SVGRepo_bgCarrier" stroke-width="0"
-                                ></g><g
-                                  id="SVGRepo_tracerCarrier"
-                                  stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                ></g><g id="SVGRepo_iconCarrier">
-                                  <path
-                                    d="M14 12C14 14.7614 11.7614 17 9 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H7.5M10 12C10 9.23858 12.2386 7 15 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H16.5"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                  ></path>
-                                </g></svg
-                              >
-                            </a>
-                            <label
-                              for="executivePostModal"
-                              on:click={() => {
-                                postTitle = item?.title;
-                                postContent = item?.description;
-                                postSentiment = item?.sentiment;
-                                postDate = item?.date;
-                                postUrl = item?.link;
-                              }}
-                              class=" cursor-pointer bg-blue-600 text-white rounded px-3 py-1.5 text-sm font-semibold sm:hover:bg-blue-700 ml-auto"
-                            >
-                              Read More
-                            </label>
-                          </div>
-                        </div>
-                      {/each}
-                    </div>
-                  {/each}
-                </div>
-              </div>
-            {:else if activeIdx === 2}
-              <div
-                class="flex flex-row items-center mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
-              >
-                <svg
-                  class="w-7 h-7 rounded-full inline-block"
-                  fill="none"
-                  viewBox="0 0 92 92"
-                  xmlns="http://www.w3.org/2000/svg"
-                  ><path d="m0 .438202h91.56v91.56h-91.56z" fill="#5448ee" /><g
-                    fill="#fff"
-                    ><path d="m67.9385 54.0751h-11.5057v9.3631h11.5057z" /><path
-                      d="m63.4377 37.8944v-9.4562h-23.4446v34.9084h11.9665v-25.4522z"
-                    /><path d="m24 28.4382h11.4878v9.4539h-11.4878z" /></g
-                  ></svg
+          <div class="mt-5 mb-5 w-fulll">
+            <div class="flex flex-wrap gap-3 mt-4">
+              {#each strategies as strategy}
+                <div
+                  on:click={() => (selectedStrategy = strategy?.name)}
+                  class="{selectedStrategy === strategy?.name
+                    ? 'bg-blue-100'
+                    : ''} flex items-center space-x-2 border rounded-full px-3 py-1 text-sm font-medium border border-gray-300 cursor-pointer sm:hover:bg-blue-100 ease-out transition"
                 >
-                <h3 class="ml-2 text-lg sm:text-xl font-semibold">
-                  Truth Social Posts
-                </h3>
-              </div>
+                  <span>{strategy.name}</span>
+                  {#if strategy?.sentiment}
+                    <span class="">({strategy.sentiment})</span>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+            <div class="border-b border-gray-400 mt-5"></div>
+            <h2 class="mt-5 mb-1 text-xl sm:text-2xl font-bold">Long Call</h2>
+            <p class="mt-3">
+              In a long call strategy, an investor buys a call option,
+              anticipating that the price of the underlying asset will increase
+              and generate a profit from the option's higher value. Investors
+              typically use a long call strategy when they have a bullish
+              outlook on the stock.
+            </p>
 
-              <div
-                class="border border-gray-300 dark:border-gray-800 rounded-md p-4"
-              >
-                <div class="">
-                  {#each posts as item, index}
-                    <div
-                      id="post-{index}"
-                      class="{index >= 1
-                        ? 'my-4'
-                        : 'my-1'} p-4 rounded-lg border border-gray-100 dark:border-gray-700 shadow-sm bg-gray-100 dark:bg-[#111315]"
-                    >
-                      <div class="flex items-start space-x-3">
-                        <a
-                          href="https://truthsocial.com/@realDonaldTrump"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          class="w-10 h-10 rounded-full shrink-0"
-                        >
-                          <img
-                            class="rounded-full"
-                            src={avatar}
-                            alt="Trump Image"
-                            loading="lazy"
-                          />
-                        </a>
+            <div class="mt-4">
+              <!-- Table header -->
 
-                        <div class="flex flex-col items-start w-full">
-                          <h3
-                            class="font-semibold text-gray-900 dark:text-white"
-                          >
-                            <a
-                              href="https://truthsocial.com/@realDonaldTrump"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              class="hover:text-blue-700"
-                            >
-                              Donald J. Trump
-                            </a>
-                          </h3>
-                          <h4 class="text-sm text-gray-500 dark:text-gray-400">
-                            <a
-                              href="https://truthsocial.com/@realDonaldTrump"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              class="hover:text-blue-700"
-                            >
-                              @realDonaldTrump
-                            </a>
-                          </h4>
-                        </div>
-                      </div>
-
-                      <p class="text-md text-gray-800 dark:text-white mt-2">
-                        {item?.content?.length > 400
-                          ? item?.content?.slice(0, 400) + "..."
-                          : item?.content}
-                      </p>
-
-                      <div
-                        class="border-b border-gray-300 dark:border-gray-800 mt-4"
+              <!-- Table container -->
+              <div class="overflow-x-auto border rounded-md">
+                <table class="min-w-full divide-y divide-gray-200">
+                  <!-- Table head -->
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
                       >
-                        <span
-                          class="text-gray-600 dark:text-gray-300 mb-4 text-sm"
-                          >{item?.date}</span
-                        >
-                      </div>
-                      <div class="flex flex-row items-center mt-4 w-full">
-                        <!--
+                        Ticker
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Action
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Quantity
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Expiration Date
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Strike
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Type
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Price
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Delta
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      >
+                        Adjustment
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-3 text-left text-sm font-medium text-gray-700"
+                      ></th>
+                    </tr>
+                  </thead>
+
+                  <!-- Table body -->
+                  <tbody class="bg-white divide-y divide-gray-200 text-sm">
+                    <!-- Example Option Leg Row -->
+                    <tr>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="text"
+                          value="TSLA"
+                          class="border border-gray-300 rounded px-2 py-1 w-16 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
                         <label
-                          on:click={() => captureScreenshot(index)}
-                          class="cursor-pointer"
+                          class="badge px-2 rounded-md bg-green-100 text-green-800 font-semibold cursor-pointer"
+                          >Buy</label
                         >
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="number"
+                          min="1"
+                          value="1"
+                          class="border border-gray-300 rounded px-2 py-1 w-20 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="date"
+                          class="border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          value="2025-05-12"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="number"
+                          step="0.01"
+                          value="280.0"
+                          class="border border-gray-300 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <label
+                          class="badge px-2 rounded-md bg-blue-100 text-blue-800 font-semibold cursor-pointer"
+                          >Call</label
+                        >
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="number"
+                          step="0.01"
+                          value="5.80"
+                          class="border border-gray-300 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <input
+                          type="number"
+                          step="0.01"
+                          value="0.30"
+                          class="border border-gray-300 rounded px-2 py-1 w-16 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <!-- Example slider -->
+                        <input
+                          type="range"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          value="0.30"
+                          class="accent-blue-500 w-24"
+                        />
+                      </td>
+                      <td class="px-4 py-3 whitespace-nowrap">
+                        <!-- Example delete or settings icon (SVG) -->
+                        <button class="text-gray-500 hover:text-red-500">
                           <svg
-                            class="w-4 h-4 mr-4 text-gray-400"
-                            viewBox="0 -2 32 32"
-                            version="1.1"
                             xmlns="http://www.w3.org/2000/svg"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                            xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
-                            fill="#ffffff"
-                            ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                              id="SVGRepo_tracerCarrier"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            ></g><g id="SVGRepo_iconCarrier">
-                              <title>camera</title>
-                              <desc>Created with Sketch Beta.</desc>
-                              <defs> </defs>
-                              <g
-                                id="Page-1"
-                                stroke="none"
-                                stroke-width="1"
-                                fill="none"
-                                fill-rule="evenodd"
-                                sketch:type="MSPage"
-                              >
-                                <g
-                                  id="Icon-Set"
-                                  sketch:type="MSLayerGroup"
-                                  transform="translate(-256.000000, -465.000000)"
-                                  fill="#000000"
-                                >
-                                  <path
-                                    d="M272,487 C268.687,487 266,484.313 266,481 C266,477.687 268.687,475 272,475 C275.313,475 278,477.687 278,481 C278,484.313 275.313,487 272,487 L272,487 Z M272,473 C267.582,473 264,476.582 264,481 C264,485.418 267.582,489 272,489 C276.418,489 280,485.418 280,481 C280,476.582 276.418,473 272,473 L272,473 Z M286,489 C286,490.104 285.104,491 284,491 L260,491 C258.896,491 258,490.104 258,489 L258,473 C258,471.896 258.896,471 260,471 L264,471 L265,469 C265.707,467.837 265.896,467 267,467 L277,467 C278.104,467 278.293,467.837 279,469 L280,471 L284,471 C285.104,471 286,471.896 286,473 L286,489 L286,489 Z M284,469 L281,469 L280,467 C279.411,465.837 279.104,465 278,465 L266,465 C264.896,465 264.53,465.954 264,467 L263,469 L260,469 C257.791,469 256,470.791 256,473 L256,489 C256,491.209 257.791,493 260,493 L284,493 C286.209,493 288,491.209 288,489 L288,473 C288,470.791 286.209,469 284,469 L284,469 Z"
-                                    id="camera"
-                                    sketch:type="MSShapeGroup"
-                                  >
-                                  </path>
-                                </g>
-                              </g>
-                            </g></svg
-                          >
-                        </label>
-                       
-                        <label>
-                          <svg
-                            class="w-5 h-5 text-gray-600"
-                            viewBox="0 0 24 24"
+                            class="h-5 w-5"
                             fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                            ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                              id="SVGRepo_tracerCarrier"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
                               stroke-linecap="round"
                               stroke-linejoin="round"
-                            ></g><g id="SVGRepo_iconCarrier">
-                              <path
-                                d="M14 12C14 14.7614 11.7614 17 9 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H7.5M10 12C10 9.23858 12.2386 7 15 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H16.5"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                              ></path>
-                            </g></svg
-                          >
-                        </label>
-                         -->
-                        <label
-                          for="socialPostModal"
-                          on:click={() => {
-                            postContent = item?.content;
-                            postDate = item?.date;
-                          }}
-                          class="cursor-pointer bg-blue-600 text-white rounded px-3 py-1.5 text-sm font-semibold sm:hover:bg-blue-700 ml-auto"
-                        >
-                          Read More
-                        </label>
-                      </div>
-                    </div>
-                  {/each}
-                </div>
+                              stroke-width="2"
+                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4m-4 0a1 1 0 00-1 1v1h6V4a1 1 0 00-1-1m-4 0h4"
+                            />
+                          </svg>
+                        </button>
+                      </td>
+                    </tr>
+
+                    <!-- Add more rows as needed -->
+                  </tbody>
+                </table>
               </div>
-            {/if}
-          </div>
-
-          <div class="order-4 shrink-0 lg:float-right lg:w-[336px]">
-            <div
-              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href={`/newsletter`}
-                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 ml-3">
-                    Market Newsletter
-                  </h2>
-                </div>
-                <span class=" p-3 ml-3 mr-3">
-                  Get a daily email with the top market news in bullet point
-                  format.
-                </span>
-              </a>
-            </div>
-
-            <div
-              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <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 ml-3">
-                    Stock Screener
-                  </h2>
-                </div>
-                <span class=" p-3 ml-3 mr-3">
-                  Build your Stock Screener to find profitable stocks.
-                </span>
-              </a>
-            </div>
-            <div
-              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <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 ml-3">
-                    Watchlist
-                  </h2>
-                </div>
-                <span class=" p-3 ml-3 mr-3">
-                  Keep track of your favorite stocks in real-time.
-                </span>
-              </a>
             </div>
           </div>
         </div>
@@ -927,151 +260,3 @@
     </div>
   </div>
 </section>
-
-<input type="checkbox" id="executivePostModal" class="modal-toggle" />
-
-<dialog
-  id="executivePostModal"
-  class="modal modal-bottom sm:modal-middle bg-[#000]/40"
->
-  <label for="executivePostModal" class="cursor-pointer modal-backdrop"></label>
-
-  <div
-    class="modal-box w-full p-6 rounded shadow-lg border
-        bg-white dark:bg-secondary border border-gray-600 dark:border-gray-800"
-  >
-    <div class="flex items-start space-x-3">
-      <span class="w-10 h-10 rounded-full shrink-0">
-        <img
-          class="rounded-full"
-          src={avatar}
-          alt="Trump Image"
-          loading="lazy"
-        />
-      </span>
-
-      <div class="flex flex-col items-start w-full">
-        <h3 class="font-semibold text-gray-900 dark:text-white">
-          <span> Donald J. Trump </span>
-        </h3>
-        <h4 class="text-sm text-gray-800 dark:text-gray-400">{postTitle}</h4>
-        <div
-          class={`mt-2 px-3 py-1 rounded  text-xs sm:text-sm w-fit
-                ${
-                  postSentiment === "Bullish"
-                    ? "bg-emerald-500 text-white"
-                    : postSentiment === "Bearish"
-                      ? "bg-red-600 text-white"
-                      : "bg-gray-300 text-black"
-                }`}
-        >
-          {postSentiment}
-        </div>
-      </div>
-    </div>
-
-    <p class="text-sm sm:text-[1rem] mb-4 mt-4">
-      {postContent}
-    </p>
-
-    <div class="border-b border-gray-300 dark:border-gray-600">
-      <span class="text-gray-600 dark:text-gray-300 mb-4 text-sm"
-        >{new Date(postDate ?? null)?.toLocaleString("en-US", {
-          month: "long",
-          day: "numeric",
-          year: "numeric",
-        })}</span
-      >
-    </div>
-
-    <div class="flex justify-end space-x-3 mt-5">
-      <label
-        for="executivePostModal"
-        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
-            bg-blue-600 text-white sm:hover:bg-blue-700"
-        tabindex="0">Close</label
-      >
-      <a
-        href={postUrl}
-        rel="noopener noreferrer"
-        target="_blank"
-        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
-            bg-blue-600 text-white sm:hover:bg-blue-700"
-        tabindex="0">Read Source</a
-      >
-    </div>
-  </div>
-</dialog>
-
-<input type="checkbox" id="socialPostModal" class="modal-toggle" />
-
-<dialog
-  id="socialPostModal"
-  class="modal modal-bottom sm:modal-middle bg-[#000]/40"
->
-  <label for="socialPostModal" class="cursor-pointer modal-backdrop"></label>
-
-  <div
-    class="modal-box w-full p-6 rounded shadow-lg border
-        bg-white dark:bg-secondary border border-gray-600 dark:border-gray-800"
-    style="opacity: 1; transform: none;"
-  >
-    <div class="flex items-start space-x-3">
-      <a
-        href="https://truthsocial.com/@realDonaldTrump"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="w-10 h-10 rounded-full shrink-0"
-      >
-        <img
-          class="rounded-full"
-          src={avatar}
-          alt="Trump Image"
-          loading="lazy"
-        />
-      </a>
-
-      <div class="flex flex-col items-start w-full">
-        <h3 class="font-semibold text-gray-900 dark:text-white">
-          <a
-            href="https://truthsocial.com/@realDonaldTrump"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="hover:text-blue-700"
-          >
-            Donald J. Trump
-          </a>
-        </h3>
-        <h4 class="text-sm text-gray-500 dark:text-gray-400">
-          <a
-            href="https://truthsocial.com/@realDonaldTrump"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="hover:text-blue-700"
-          >
-            @realDonaldTrump
-          </a>
-        </h4>
-      </div>
-    </div>
-
-    <p class="text-sm sm:text-[1rem] mb-4 mt-4">
-      {postContent}
-    </p>
-
-    <div class="border-b border-gray-300 dark:border-gray-600">
-      <span class="text-gray-600 dark:text-gray-300 mb-4 text-sm"
-        >{postDate}</span
-      >
-    </div>
-
-    <div class="flex justify-end space-x-3 mt-5">
-      <label
-        for="socialPostModal"
-        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
-            bg-blue-600 text-white sm:hover:bg-blue-700"
-        tabindex="0">Close</label
-      >
-    </div>
-  </div>
-</dialog>
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index e90c2643..c0bce371 100644
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@@ -353,7 +353,7 @@
       >
         <div class="w-full mt-5">
           <div class="lg:float-left lg:w-[calc(100%-336px-20px)]">
-            <div class=" border-b-[2px]">
+            <div class="border-b-[2px] border-[#2C6288] dark:border-white">
               <h1 class="mb-1 text-2xl sm:text-3xl font-bold">POTUS Tracker</h1>
             </div>
           </div>