ui fix and more rules

src/lib/components/TickerInfoCard.svelte

@@ -90,7 +90,7 @@ $: {
 
           <div class="flex flex-row pt-1 pb-2">
               {#if earningDate}
-              <div class="badge badge-error gap-2 mt-2 font-medium text-sm text-white">
+              <div class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black">
                 Earnings Call - {earningDate}
               </div>
               {/if}

src/routes/most-shorted-stocks/+page.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   
     export let data;
@@ -37,6 +38,84 @@ async function handleScroll() {
         };
   })
   
+  let columns = [
+    {key: "rank", label: "#", align: "right"},
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "shortRatio", label: "Short Ratio", align: "right" },
+    { key: "sharesShort", label: "Short Interest", align: "right" },
+    { key: "shortFloatPercent", label: "Short % Float", align: "right" },
+    { key: "shortOutStandingPercent", label: "Short % of Shares Out", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    shortRatio: { order: "none", type: "number" },
+    sharesShort: { order: "none", type: "number" },
+    shortFloatPercent: { order: "none", type: "number" },
+    shortOutStandingPercent: { order: "none", type: "number" },
+  };
+
+
+    const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = rawData;
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues);
+  };
 
   $: charNumber = $screenWidth < 640 ? 15 : 20;
 
@@ -137,37 +216,14 @@ async function handleScroll() {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B] border-b border-[#27272A]">
+                          <TableHeader {columns} {sortOrders} {sortData} />
-                            <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
-                              #
-                            </th>
-                            <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Symbol
-                            </th>
-  
-                            <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Name
-                            </th>
-                            <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Short Ratio
-                            </th>
-                            <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Short Interest
-                            </th>
-                            <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Short % Float
-                            </th>
-                            <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
-                              Short % of Shares Out
-                            </th>
-                          </tr>
                         </thead>
                         <tbody>
                           {#each stockList as item, index}
   
                           <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
-                              {index+1}
+                              {item?.rank}
                             </td>
   
                             <td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">

src/routes/stock-screener/+page.svelte

@@ -354,6 +354,27 @@
       defaultCondition: "over",
       defaultValue: "any",
     },
+    epsGrowthYears: {
+      label: "EPS Growth Years",
+      step: ["10", "5", "3", "1"],
+      category: "fund",
+      defaultCondition: "over",
+      defaultValue: "any",
+    },
+    netIncomeGrowthYears: {
+      label: "Net Income Growth Years",
+      step: ["10", "5", "3", "1"],
+      category: "fund",
+      defaultCondition: "over",
+      defaultValue: "any",
+    },
+    grossProfitGrowthYears: {
+      label: "Gross Profit Growth Years",
+      step: ["10", "5", "3", "1"],
+      category: "fund",
+      defaultCondition: "over",
+      defaultValue: "any",
+    },
     growthRevenue: {
       label: "Revenue Growth",
       step: ["200%", "100%", "50%", "20%", "10%", "5%", "1%"],