ui fixes

src/lib/components/FailToDeliver.svelte

@@ -21,23 +21,24 @@
   let activeIdx = 0;
   const tabs = [
     {
-      title: "Daily",
+      title: "Monthly",
     },
     {
       title: "Quarterly",
     },
   ];
 
-  let tableList = rawData?.sort(
+  let tableList;
-    (a, b) => new Date(b?.date) - new Date(a?.date),
-  );
-
   function changeTimePeriod(i) {
     activeIdx = i;
     tableList = rawData?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
 
     if (activeIdx === 1) {
+      // Quarterly filter as before
       tableList = filterByPeriod([...tableList]);
+    } else if (activeIdx === 0) {
+      // New monthly filter: one result per month at the beginning of each month
+      tableList = filterByMonth([...tableList]);
     }
   }
 
@@ -59,7 +60,25 @@
     });
   }
 
-  function getPlotOptions() {
+  function filterByMonth(data) {
+    if (!Array.isArray(data) || data.length === 0) return [];
+
+    // Monthly: one result per month.
+    const seenMonths = new Set();
+    return data.filter((item) => {
+      const dt = new Date(item.date);
+      const year = dt.getFullYear();
+      const month = dt.getMonth(); // Month as a number (0-11)
+      const key = `${year}-${month}`;
+      if (!seenMonths.has(key)) {
+        seenMonths.add(key);
+        return true;
+      }
+      return false;
+    });
+  }
+
+  function plotData() {
     let dates = [];
     let priceList = [];
     let failToDeliverList = [];
@@ -149,7 +168,7 @@
 
         labels: {
           style: { color: $mode === "light" ? "black" : "white" },
-          distance: 20, // Increases space between label and axis
+          distance: 10, // Increases space between label and axis
           formatter: function () {
             return new Date(this.value).toLocaleDateString("en-US", {
               day: "2-digit", // Include day number
@@ -233,7 +252,8 @@
               data?.getStockQuote?.avgVolume) *
             100
           )?.toFixed(2);
-          config = getPlotOptions();
+          config = plotData();
+          changeTimePeriod(0);
         }
       }
     }
@@ -323,10 +343,18 @@
         >
           <thead class="text-muted dark:text-white dark:bg-default">
             <tr>
-              <th class=" font-semibold text-start text-sm">Date</th>
+              <th class=" font-semibold text-start text-sm sm:text-[1rem]"
-              <th class=" font-semibold text-end text-sm">Price</th>
+                >Date</th
-              <th class=" font-semibold text-end text-sm">FTD Shares</th>
+              >
-              <th class=" font-semibold text-end text-sm">% Change</th>
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
+                >Price</th
+              >
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
+                >FTD Shares</th
+              >
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
+                >% Change</th
+              >
             </tr>
           </thead>
           <tbody>
@@ -359,7 +387,7 @@
                   {#if index === tableList?.length - 1}
                     n/a
                   {:else if item?.failToDeliver > tableList[index + 1]?.failToDeliver}
-                    <span class="text-green-600 dark:text-[#00FC50]">
+                    <span class="text-green-700 dark:text-[#00FC50]">
                       +{(
                         ((item?.failToDeliver -
                           tableList[index + 1]?.failToDeliver) /
@@ -368,7 +396,7 @@
                       )?.toFixed(2)}%
                     </span>
                   {:else if item?.failToDeliver < tableList[index + 1]?.failToDeliver}
-                    <span class="text-red-600 dark:text-[#FF2F1F]">
+                    <span class="text-red-700 dark:text-[#FF2F1F]">
                       -{(
                         Math.abs(
                           (item?.failToDeliver -

src/lib/components/ShareHolders.svelte

@@ -291,7 +291,7 @@
         </p>
 
         <div
-          class="border border-gray-800 rounded w-full mt-3"
+          class="border border-gray-300 dark:border-gray-800 rounded w-full mt-3 shadow-sm"
           use:highcharts={config}
         ></div>
       </div>
@@ -558,13 +558,13 @@
                     class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {#if item?.changeInSharesNumberPercentage >= 0}
-                      <span class="text-green-600 dark:text-[#00FC50]"
+                      <span class="text-green-700 dark:text-[#00FC50]"
                         >+{abbreviateNumber(
                           item?.changeInSharesNumberPercentage?.toFixed(2),
                         )}%</span
                       >
                     {:else if item?.changeInSharesNumberPercentage < 0}
-                      <span class="text-red-600 dark:text-[#FF2F1F]"
+                      <span class="text-red-700 dark:text-[#FF2F1F]"
                         >{abbreviateNumber(
                           item?.changeInSharesNumberPercentage?.toFixed(2),
                         )}%</span

src/routes/stocks/[tickerID]/insider/+page.server.ts

@@ -8,14 +8,14 @@ const transactionTypeMap = {
   "A-Award": "Grant",
   "D-Return": "Grant",
   "G-Gift": "Grant",
-  "S-Sale": "Sold",
+  "S-Sale": "Sale",
   "M-Exempt": "Exercise",
   "X-InTheMoney": "Exercise",
   "C-Conversion": "Exercise",
-  "F-InKind": "Sold",
+  "F-InKind": "Sale",
   "J-Other": (item) => {
     if (item.acquistionOrDisposition === "D") {
-      return "Sold";
+      return "Sale";
     } else if (item.acquistionOrDisposition === "A") {
       return "Bought";
     } else {
@@ -53,8 +53,8 @@ export const load = async ({ locals, params }) => {
           ? transactionTypeMap[item?.transactionType](item)
           : transactionTypeMap[item?.transactionType];
 
-      // Only include items with 'Bought' or 'Sold'
+      // Only include items with 'Bought' or 'Sale'
-      if (newTransactionType === "Bought" || newTransactionType === "Sold") {
+      if (newTransactionType === "Bought" || newTransactionType === "Sale") {
         const value = item?.securitiesTransacted * item?.price;
         if (value > 0) {
           acc.push({
@@ -67,6 +67,7 @@ export const load = async ({ locals, params }) => {
 
       return acc;
     }, []);
+  
     return output;
   };
 

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

@@ -3,8 +3,7 @@
   import { formatString, abbreviateNumber } from "$lib/utils";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import { onMount } from "svelte";
-  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+
-  import { Button } from "$lib/components/shadcn/button/index.js";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import SEO from "$lib/components/SEO.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -23,65 +22,6 @@
     });
   }
 
-  let statistics = {};
-  let buySellRatio = 0;
-  const now = new Date();
-  let year = now.getFullYear();
-  let quarter = Math.floor(now.getMonth() / 3) + 1;
-  let yearRange = Array.from(
-    new Set(
-      rawData?.map((item) => new Date(item?.transactionDate)?.getFullYear()),
-    ),
-  )?.sort((a, b) => b - a);
-  if (yearRange?.length > 0) {
-    year = yearRange?.slice(0)?.at(0);
-  }
-
-  function calculateInsiderTradingStatistics(data, year, quarter) {
-    // Helper function to check if the transaction date is within the current quarter
-    const isInCurrentQuarter = (transactionDate) => {
-      const date = new Date(transactionDate);
-      return (
-        date.getFullYear() === year &&
-        Math.floor(date.getMonth() / 3) + 1 === quarter
-      );
-    };
-
-    // Initialize statistics object
-    let statistics = {
-      soldShares: 0,
-      buyShares: 0,
-      buySharesPercentage: 0,
-      soldSharesPercentage: 0,
-      quarter: quarter,
-      year: year,
-    };
-
-    // Summing up bought and sold shares efficiently in a single loop
-    data.forEach(
-      ({ transactionType, securitiesTransacted, price, transactionDate }) => {
-        if (price > 0 && isInCurrentQuarter(transactionDate)) {
-          if (transactionType === "Sold") {
-            statistics.soldShares += securitiesTransacted;
-          } else if (transactionType === "Bought") {
-            statistics.buyShares += securitiesTransacted;
-          }
-        }
-      },
-    );
-
-    const totalShares = statistics.buyShares + statistics.soldShares;
-
-    if (totalShares > 0) {
-      statistics.buySharesPercentage = Math.floor(
-        (statistics.buyShares / totalShares) * 100,
-      );
-      statistics.soldSharesPercentage = 100 - statistics.buySharesPercentage;
-    }
-
-    return statistics;
-  }
-
   function extractOfficeInfo(inputString) {
     const indexOfficer = inputString?.toLowerCase()?.indexOf("officer:");
     const indexOther = inputString?.toLowerCase()?.indexOf("other:");
@@ -115,14 +55,6 @@
     };
   });
 
-  const transactionStyles = {
-    Bought: "P - Purchase",
-    Grant: "G - Grant",
-    Sold: "S - Sale",
-    Exercise: "E - Exercise",
-    "n/a": { text: "n/a", class: "text-gray-300" },
-  };
-
   let columns = [
     { key: "reportingName", label: "Name", align: "left" },
     { key: "transactionDate", label: "Date", align: "right" },
@@ -198,16 +130,6 @@
     // Sort using the generic comparison function
     insiderTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
-
-  $: {
-    if ((year || quarter) && typeof window !== "undefined") {
-      statistics = calculateInsiderTradingStatistics(rawData, year, quarter);
-      buySellRatio =
-        statistics?.soldShares !== 0
-          ? statistics?.buyShares / statistics?.soldShares
-          : 0;
-    }
-  }
 </script>
 
 <SEO
@@ -233,283 +155,8 @@
 
         {#if isLoaded}
           {#if insiderTradingList?.length !== 0}
-            {#if Object?.keys(statistics)?.length !== 0}
-              <div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
-                <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 sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
-                      >
-                        <span class="truncate">Year: {year}</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-gray-400">
-                        Select Year
-                      </DropdownMenu.Label>
-                      <DropdownMenu.Separator />
-                      <DropdownMenu.Group>
-                        {#each yearRange as index}
-                          <DropdownMenu.Item
-                            on:click={() => (year = index)}
-                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
-                          >
-                            {index}
-                          </DropdownMenu.Item>
-                        {/each}
-                      </DropdownMenu.Group>
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Root>
-                </div>
-                <div class="relative inline-block text-left grow ml-3">
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger asChild let:builder>
-                      <Button
-                        builders={[builder]}
-                        class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
-                      >
-                        <span class="truncate">Quarter: Q{quarter}</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-gray-400">
-                        Select Quarter
-                      </DropdownMenu.Label>
-                      <DropdownMenu.Separator />
-                      <DropdownMenu.Group>
-                        {#each [1, 2, 3, 4] as index}
-                          <DropdownMenu.Item
-                            on:click={() => (quarter = index)}
-                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
-                          >
-                            Q{index}
-                          </DropdownMenu.Item>
-                        {/each}
-                      </DropdownMenu.Group>
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Root>
-                </div>
-              </div>
-
-              <h3 class=" text-lg font-semibold pt-5">
-                Q{statistics?.quarter}
-                {statistics?.year} Insider Statistics
-              </h3>
-              <!--Start Widget-->
-              <div
-                class="w-full mt-5 mb-10 m-auto flex justify-center items-center p-1"
-              >
-                <div
-                  class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
-                >
-                  <!--Start Put/Call-->
-                  <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
-                  >
-                    <div class="flex flex-col items-start">
-                      <span class="  text-sm sm:text-[1rem]">Buy/Sell</span>
-                      <span class="text-start text-sm sm:text-[1rem]">
-                        {buySellRatio > 0
-                          ? buySellRatio?.toFixed(1)
-                          : buySellRatio}
-                      </span>
-                    </div>
-                    <!-- Circular Progress -->
-                    <div class="relative size-12 sm:size-14 ml-auto">
-                      <svg
-                        class="size-full w-12 h-12 sm:w-14 sm:h-14"
-                        viewBox="0 0 36 36"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <!-- Background Circle -->
-                        <circle
-                          cx="18"
-                          cy="18"
-                          r="16"
-                          fill="none"
-                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
-                          stroke-width="3"
-                        ></circle>
-                        <!-- Progress Circle inside a group with rotation -->
-                        <g class="origin-center -rotate-90 transform">
-                          <circle
-                            cx="18"
-                            cy="18"
-                            r="16"
-                            fill="none"
-                            class="stroke-current text-blue-700"
-                            stroke-width="3"
-                            stroke-dasharray="100"
-                            stroke-dashoffset={buySellRatio >= 1
-                              ? 0
-                              : 100 - (buySellRatio * 100)?.toFixed(2)}
-                          ></circle>
-                        </g>
-                      </svg>
-                      <!-- Percentage Text -->
-                      <div
-                        class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                      >
-                        <span class="text-center text-sm sm:text-[1rem]"
-                          >{(buySellRatio * 100)?.toFixed(0)}%</span
-                        >
-                      </div>
-                    </div>
-                    <!-- End Circular Progress -->
-                  </div>
-                  <!--End Put/Call-->
-                  <!--Start Call Flow-->
-                  <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
-                  >
-                    <div class="flex flex-col items-start">
-                      <span class="  text-sm sm:text-[1rem]">Bought Shares</span
-                      >
-                      <span class="text-start text-sm sm:text-[1rem]">
-                        {new Intl.NumberFormat("en", {
-                          minimumFractionDigits: 0,
-                          maximumFractionDigits: 0,
-                        }).format(statistics?.buyShares)}
-                      </span>
-                    </div>
-                    <!-- Circular Progress -->
-                    <div class="relative size-12 sm:size-14 ml-auto">
-                      <svg
-                        class="size-full w-12 h-12 sm:w-14 sm:h-14"
-                        viewBox="0 0 36 36"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <!-- Background Circle -->
-                        <circle
-                          cx="18"
-                          cy="18"
-                          r="16"
-                          fill="none"
-                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
-                          stroke-width="3"
-                        ></circle>
-                        <!-- Progress Circle inside a group with rotation -->
-                        <g class="origin-center -rotate-90 transform">
-                          <circle
-                            cx="18"
-                            cy="18"
-                            r="16"
-                            fill="none"
-                            class="stroke-current text-[#00FC50]"
-                            stroke-width="3"
-                            stroke-dasharray="100"
-                            stroke-dashoffset={100 -
-                              statistics?.buySharesPercentage}
-                          ></circle>
-                        </g>
-                      </svg>
-                      <!-- Percentage Text -->
-                      <div
-                        class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                      >
-                        <span class="text-center text-sm sm:text-[1rem]"
-                          >{statistics?.buySharesPercentage}%</span
-                        >
-                      </div>
-                    </div>
-                    <!-- End Circular Progress -->
-                  </div>
-                  <!--End Call Flow-->
-                  <!--Start Put Flow-->
-                  <div
-                    class="shadow-sm flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-200 dark:bg-primary h-20"
-                  >
-                    <div class="flex flex-col items-start">
-                      <span class="  text-sm sm:text-[1rem]">Sold Shares</span>
-                      <span class="text-start text-sm sm:text-[1rem]">
-                        {new Intl.NumberFormat("en", {
-                          minimumFractionDigits: 0,
-                          maximumFractionDigits: 0,
-                        }).format(statistics?.soldShares)}
-                      </span>
-                    </div>
-                    <!-- Circular Progress -->
-                    <div class="relative size-12 sm:size-14 ml-auto">
-                      <svg
-                        class="size-full w-12 h-12 sm:w-14 sm:h-14"
-                        viewBox="0 0 36 36"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <!-- Background Circle -->
-                        <circle
-                          cx="18"
-                          cy="18"
-                          r="16"
-                          fill="none"
-                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
-                          stroke-width="3"
-                        ></circle>
-                        <!-- Progress Circle inside a group with rotation -->
-                        <g class="origin-center -rotate-90 transform">
-                          <circle
-                            cx="18"
-                            cy="18"
-                            r="16"
-                            fill="none"
-                            class="stroke-current text-[#EE5365]"
-                            stroke-width="3"
-                            stroke-dasharray="100"
-                            stroke-dashoffset={100 -
-                              statistics?.soldSharesPercentage}
-                          ></circle>
-                        </g>
-                      </svg>
-                      <!-- Percentage Text -->
-                      <div
-                        class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                      >
-                        <span class="text-center text-sm sm:text-[1rem]"
-                          >{statistics?.soldSharesPercentage}%</span
-                        >
-                      </div>
-                    </div>
-                    <!-- End Circular Progress -->
-                  </div>
-                  <!--End Put Flow-->
-                </div>
-              </div>
-              <!--End Widget-->
-            {/if}
-
             <div
-              class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto no-scrollbar"
+              class="mt-5 flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto no-scrollbar"
             >
               <table
                 class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
@@ -559,11 +206,7 @@
                         <td
                           class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
                         >
-                          {@html abbreviateNumber(
+                          {item?.securitiesTransacted?.toLocaleString("en-US")}
-                            item?.securitiesTransacted,
-                            false,
-                            true,
-                          )}
                         </td>
                         <td
                           class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
@@ -573,16 +216,16 @@
                         <td
                           class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
-                          {@html abbreviateNumber(item?.value, false, true)}
+                          ${abbreviateNumber(item?.value)}
                         </td>
                         <td class="text-end flex justify-end whitespace-nowrap">
                           <div
                             class="w-auto px-4 py-1 rounded-full uppercase {item?.transactionType ===
                             'Bought'
-                              ? 'bg-[#75D377] text-black'
+                              ? 'bg-[#75D377] text-muted'
                               : 'bg-[#cd4050] '} font-semibold"
                           >
-                            {transactionStyles[item?.transactionType]}
+                            {item?.transactionType}
                           </div>
                         </td>
                       </tr>

src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte

@@ -188,131 +188,6 @@
           <h1 class="text-xl sm:text-2xl font-bold mb-4">Congress Trading</h1>
 
           {#if senateTradingList?.length !== 0}
-            <!--Start Widget-->
-            <div
-              class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
-            >
-              <div
-                class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
-              >
-                <!--Start Buy/Sell-->
-                <div
-                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
-                >
-                  <div class="flex flex-col items-start">
-                    <span class="font-semibold text-sm sm:text-[1rem]"
-                      >Buy/Sell</span
-                    >
-                    <span class="text-start text-sm sm:text-[1rem]">
-                      {buySellRatio?.toFixed(3)}
-                    </span>
-                  </div>
-                  <!-- Circular Progress -->
-                  <div class="relative size-14 ml-auto">
-                    <svg
-                      class="size-full w-14 h-14"
-                      viewBox="0 0 36 36"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <!-- Background Circle -->
-                      <circle
-                        cx="18"
-                        cy="18"
-                        r="16"
-                        fill="none"
-                        class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
-                        stroke-width="3"
-                      ></circle>
-                      <!-- Progress Circle inside a group with rotation -->
-                      <g class="origin-center -rotate-90 transform">
-                        <circle
-                          cx="18"
-                          cy="18"
-                          r="16"
-                          fill="none"
-                          class="stroke-current {buySellRatio >= 0.5
-                            ? 'text-green-600 dark:text-[#00FC50]'
-                            : 'text-[#EE5365]'} "
-                          stroke-width="3"
-                          stroke-dasharray="100"
-                          stroke-dashoffset={100 - buySellRatio * 100 >= 0
-                            ? 100 - (buySellRatio * 100)?.toFixed(2)
-                            : 0}
-                        ></circle>
-                      </g>
-                    </svg>
-                    <!-- Percentage Text -->
-                    <div
-                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                    >
-                      <span class="text-center text-sm sm:text-[1rem]"
-                        >{buySellRatio?.toFixed(2)}</span
-                      >
-                    </div>
-                  </div>
-                  <!-- End Circular Progress -->
-                </div>
-                <!--End Buy/Sell-->
-                <!--Start Dem/Rep-->
-                <div
-                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
-                >
-                  <div class="flex flex-col items-start">
-                    <span class="font-semibold text-sm sm:text-[1rem]"
-                      >Dem/Rep</span
-                    >
-                    <span class="text-start text-sm sm:text-[1rem]">
-                      {partyRatio?.toFixed(3)}
-                    </span>
-                  </div>
-                  <!-- Circular Progress -->
-                  <div class="relative size-14 ml-auto">
-                    <svg
-                      class="size-full w-14 h-14"
-                      viewBox="0 0 36 36"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <!-- Background Circle -->
-                      <circle
-                        cx="18"
-                        cy="18"
-                        r="16"
-                        fill="none"
-                        class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
-                        stroke-width="3"
-                      ></circle>
-                      <!-- Progress Circle inside a group with rotation -->
-                      <g class="origin-center -rotate-90 transform">
-                        <circle
-                          cx="18"
-                          cy="18"
-                          r="16"
-                          fill="none"
-                          class="stroke-current text-blue-700"
-                          stroke-width="3"
-                          stroke-dasharray="100"
-                          stroke-dashoffset={100 - partyRatio * 100 >= 0
-                            ? 100 - (partyRatio * 100)?.toFixed(2)
-                            : 0}
-                        ></circle>
-                      </g>
-                    </svg>
-                    <!-- Percentage Text -->
-                    <div
-                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                    >
-                      <span class="text-center text-sm sm:text-[1rem]"
-                        >{partyRatio?.toFixed(2)}</span
-                      >
-                    </div>
-                  </div>
-                  <!-- End Circular Progress -->
-                </div>
-                <!--End Put/Call-->
-              </div>
-            </div>
-            <!--End Widget-->
-
             <div
               class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
             >
@@ -393,11 +268,11 @@
                         class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {#if item?.type === "Bought"}
-                          <span class="text-green-600 dark:text-[#00FC50]"
+                          <span class="text-green-700 dark:text-[#00FC50]"
                             >Bought</span
                           >
                         {:else if item?.type === "Sold"}
-                          <span class="text-red-600 dark:text-[#FF2F1F]"
+                          <span class="text-red-700 dark:text-[#FF2F1F]"
                             >Sold</span
                           >
                         {:else if item?.type === "Exchange"}

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

@@ -17,7 +17,7 @@
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:pl-7 sm:pb-7 sm:pt-5 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full">
           <h1 class="text-xl sm:text-2xl font-bold">13F Institute Ownership</h1>
         </div>

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   export let data;
   const similarStocks = data?.getSimilarStocks?.sort(
@@ -49,7 +48,7 @@
                           ><a
                             href={`/stocks/${item?.symbol}`}
                             class="text-blue-700 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
-                            >{item?.symbol}</a
+                            >{item?.name}</a
                           ></td
                         >
                         <td class="text-right text-[1rem] px-2"

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -117,7 +117,7 @@
                         : "n/a"}</span
                   >
                   <div class="flex flex-col ml-2">
-                    <span class="text-sm text-red-600 dark:text-red-400">
+                    <span class="text-sm text-red-700 dark:text-red-400">
                       {relativeFTD > 20 ? "High Impact" : "Low Impact"}
                     </span>
                   </div>
@@ -140,10 +140,10 @@
                     <span
                       class="text-sm {changePercentageYearAgo >= 0 &&
                       changePercentageYearAgo !== null
-                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
+                        ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
                         : changePercentageYearAgo < 0 &&
                             changePercentageYearAgo !== null
-                          ? 'text-red-600 dark:text-[#FF2F1F]'
+                          ? 'text-red-700 dark:text-[#FF2F1F]'
                           : ''}"
                     >
                       {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend