ui fix

src/routes/etf/etf-providers/+page.svelte

@@ -1,9 +1,84 @@
 <script lang="ts">
   import { abbreviateNumber, formatETFName } from "$lib/utils";
   import { numberOfUnreadNotification } from "$lib/store";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
   let etfProviderList = data?.getAllETFProviders;
+
+  let columns = [
+    { key: "etfProvider", label: "Provider Name", align: "left" },
+    { key: "totalAssets", label: "Total Assets", align: "right" },
+    { key: "funds", label: "Funds", align: "right" },
+    { key: "avgExpenseRatio", label: "Avg. Cost", align: "right" },
+    { key: "avgHoldings", label: "Avg. Holdings", align: "right" },
+  ];
+
+  let sortOrders = {
+    etfProvider: { order: "none", type: "string" },
+    totalAssets: { order: "none", type: "number" },
+    funds: { order: "none", type: "number" },
+    avgExpenseRatio: { order: "none", type: "number" },
+    avgHoldings: { 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 = data?.getAllETFProviders;
+
+    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") {
+      etfProviderList = [...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
+    etfProviderList = [...originalData].sort(compareValues);
+  };
 </script>
 
 <svelte:head>
@@ -69,17 +144,7 @@
         class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
       >
         <thead>
-          <tr class="border border-slate-800">
+          <TableHeader {columns} {sortOrders} {sortData} />
-            <th class="text-white font-semibold text-sm">Provider Name</th>
-            <th class="text-white font-semibold text-end text-sm"
-              >Total Assets</th
-            >
-            <th class="text-white font-semibold text-sm text-end">Funds</th>
-            <th class="text-white font-semibold text-sm text-end">Avg. Cost</th>
-            <th class="text-white font-semibold text-sm text-end"
-              >Avg. Holdings</th
-            >
-          </tr>
         </thead>
         <tbody>
           {#each etfProviderList as item, index}
@@ -92,7 +157,7 @@
               >
                 <a
                   href={"/etf/etf-providers/" + item?.etfProvider}
-                  class="sm:hover:text-white text-blue-400"
+                  class="sm:hover:underline sm:hover:underline-offset-4 text-white"
                 >
                   {formatETFName(item?.etfProvider)}
                 </a>

src/routes/etf/new-launches/+page.svelte

@@ -1,15 +1,88 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { numberOfUnreadNotification, screenWidth } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
-  import logo from "$lib/images/new_launcher_logo.png";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
 
   let etfData = data?.getETFNewLaunches;
 
   $: charNumber = $screenWidth < 640 ? 30 : 40;
+
+  let columns = [
+    { key: "inceptionDate", label: "Inception", align: "left" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Fund Name", align: "left" },
+    { key: "numberOfHoldings", label: "Holdings", align: "right" },
+    { key: "totalAssets", label: "Total Assets", align: "right" },
+  ];
+
+  let sortOrders = {
+    inceptionDate: { order: "none", type: "date" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    numberOfHoldings: { order: "none", type: "number" },
+    totalAssets: { 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 = data?.getETFNewLaunches;
+
+    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") {
+      etfData = [...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
+    etfData = [...originalData].sort(compareValues);
+  };
 </script>
 
 <svelte:head>
@@ -44,9 +117,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li><a class="text-gray-300">New Launches of ETFs</a></li>
@@ -59,108 +132,30 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
+          <div class="mb-6 border-b-[2px]">
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-          >
+              New Launches of ETFs
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+            </h1>
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    New ETFs
-                  </h1>
-                </div>
-
-                <span
-                  class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  Collection of all new launches of ETFs
-                </span>
-                <!--
-        <label for="marketMoverInfo" class="cursor-pointer flex justify-center items-center mt-2">
-          <span class="text-white text-md font-medium">
-            Learn more
-          </span>
-          <svg class="w-6 h-6 inline-block ml-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
-        </label>
-        -->
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-0">
-                  <img class="w-28 ml-4" src={logo} alt="logo" loading="lazy" />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
           </div>
 
-          <div
+          <div class="w-full mt-5 m-auto mb-10 bg-[#09090B] overflow-hidden">
-            class="w-full mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden"
-          >
             <!--Start Top Winners/Losers-->
             <div class="flex flex-col justify-center items-center">
-              <div class="ml-4 text-start w-full text-white mb-2">
+              <div class="text-start w-full text-white mb-2">
                 <span class="font-bold text-2xl">
                   {etfData?.length} ETFs
                 </span>
               </div>
 
-              <div class="border-b mt-2 border-gray-800 w-full mb-4" />
-
               <div class="w-full overflow-x-scroll">
                 <table
                   class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden"
                 >
                   <thead>
-                    <tr class="border-b border-[#27272A]">
+                    <TableHeader {columns} {sortOrders} {sortData} />
-                      <th class="text-white font-semibold text-[1rem]"
-                        >Inception</th
-                      >
-                      <th class="text-white font-semibold text-[1rem]"
-                        >Symbol</th
-                      >
-                      <th class="text-white font-semibold text-[1rem]"
-                        >Fund Name</th
-                      >
-                      <th class="text-white font-semibold text-end text-[1rem]"
-                        >Holdings</th
-                      >
-                      <th class="text-white font-semibold text-end text-[1rem]"
-                        >Total Assets</th
-                      >
-                    </tr>
                   </thead>
                   <tbody>
-                    {#each etfData as item, index}
+                    {#each etfData as item}
                       <tr
                         class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
                       >
@@ -200,14 +195,17 @@
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
                         >
-                          {item?.numberOfHoldings}
+                          {item?.numberOfHoldings !== null &&
+                          item?.numberOfHoldings !== 0
+                            ? item?.numberOfHoldings
+                            : "-"}
                         </td>
 
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
                         >
                           {item?.totalAssets !== 0 && item?.totalAssets !== null
-                            ? abbreviateNumber(item?.totalAssets, true)
+                            ? abbreviateNumber(item?.totalAssets)
                             : "-"}
                         </td>
                       </tr>
@@ -250,7 +248,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Analyst 📊
+                  Top Analyst
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -269,7 +267,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Congress Trading 🇺🇸
+                  Congress Trading
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>