From 59d1ced79be8d25812a630b6b2f93e6c3f10b233 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 28 Dec 2024 22:30:28 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/ShareHolders.svelte        |  18 ++-
 src/routes/hedge-funds/+page.svelte           |   2 +-
 src/routes/politicians/+page.svelte           |  10 +-
 .../insider/congress-trading/+page.svelte     | 109 ++++++++++++++----
 4 files changed, 104 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index faadee49..21688a55 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -331,7 +331,9 @@
               class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class="font-medium text-gray-200 text-sm">Put/Call</span>
+                <span class="font-medium text-white text-sm sm:text-[1rem]"
+                  >Put/Call</span
+                >
                 <span
                   class="text-start text-sm sm:text-[1rem] font-medium text-white"
                 >
@@ -387,7 +389,9 @@
               class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class="font-medium text-gray-200 text-sm">Call Flow</span>
+                <span class="font-medium text-white text-sm sm:text-[1rem]"
+                  >Call Flow</span
+                >
                 <span
                   class="text-start text-sm sm:text-[1rem] font-medium text-white"
                 >
@@ -445,7 +449,9 @@
               class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class="font-medium text-gray-200 text-sm">Put Flow</span>
+                <span class="font-medium text-white text-sm sm:text-[1rem]"
+                  >Put Flow</span
+                >
                 <span
                   class="text-start text-sm sm:text-[1rem] font-medium text-white"
                 >
@@ -526,7 +532,9 @@
       <div
         class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll"
       >
-        <table class="table table-sm table-compact w-full">
+        <table
+          class="table table-sm table-compact bg-table border border-gray-800 w-full"
+        >
           <thead>
             <TableHeader {columns} {sortOrders} {sortData} />
           </thead>
@@ -534,7 +542,7 @@
             {#each displayList as item, index}
               {#if item?.investorName?.length > 0}
                 <tr
-                  class="border-y border-gray-800 odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b-[#09090B] {index +
+                  class="border-b border-gray-800 odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index +
                     1 ===
                     shareholderList?.length && data?.user?.tier !== 'Pro'
                     ? 'opacity-[0.1]'
diff --git a/src/routes/hedge-funds/+page.svelte b/src/routes/hedge-funds/+page.svelte
index 471730c1..435e037b 100644
--- a/src/routes/hedge-funds/+page.svelte
+++ b/src/routes/hedge-funds/+page.svelte
@@ -121,7 +121,7 @@
     </div>
 
     <section class="w-full overflow-hidden m-auto sm:mt-10 px-0 mt-10">
-      <div class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden">
+      <div class=" flex justify-center w-full m-auto overflow-hidden">
         <div
           class="relative flex justify-center items-center overflow-hidden w-full"
         >
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index 8e75076e..84026b63 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -192,9 +192,7 @@
   <body class="w-full overflow-hidden m-auto">
     {#if isLoaded}
       <section class="w-full overflow-hidden m-auto sm:mt-10 mt-10">
-        <div
-          class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden"
-        >
+        <div class=" flex justify-center w-full m-auto overflow-hidden">
           <div
             class="relative flex justify-center items-center overflow-hidden w-full"
           >
@@ -264,12 +262,12 @@
                   {#each displayList as item}
                     <a
                       href={`/politicians/${item?.id}`}
-                      class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out border sm:hover:border-[#000] {item?.party ===
+                      class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out {item?.party ===
                       'Republican'
                         ? 'sm:hover:shadow-[#80000D]'
                         : item?.party === 'Democratic'
                           ? 'sm:hover:shadow-[#1358C3]'
-                          : 'sm:hover:shadow-[#636465]'} border-gray-600 shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
+                          : 'sm:hover:shadow-[#636465]'}  shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
                     >
                       <div class="flex flex-col relative">
                         <div
@@ -312,7 +310,7 @@
                           class="flex flex-col justify-center items-center rounded-2xl"
                         >
                           <div
-                            class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party ===
+                            class="-mt-3 shadow-lg rounded-full border border-gray-800 w-20 h-20 relative {item?.party ===
                             'Republican'
                               ? 'republican-striped bg-[#98272B]'
                               : item?.party === 'Democratic'
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 32922d3f..48f0615c 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -6,6 +6,7 @@
     stockTicker,
   } from "$lib/store";
   import { getPartyForPoliticians } from "$lib/utils";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
 
@@ -103,6 +104,83 @@
       window.removeEventListener("scroll", handleScroll);
     };
   });
+
+  let columns = [
+    { key: "representative", label: "Person", align: "left" },
+    { key: "party", label: "Party", align: "left" },
+    { key: "transactionDate", label: "Transaction Date", align: "right" },
+    {
+      key: "amount",
+      label: "Amount",
+      align: "right",
+    },
+    { key: "type", label: "Type", align: "right" },
+  ];
+
+  let sortOrders = {
+    representative: { order: "none", type: "string" },
+    party: { order: "none", type: "string" },
+    transactionDate: { order: "none", type: "date" },
+    amount: { order: "none", type: "string" },
+    type: { order: "none", type: "string" },
+  };
+
+  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") {
+      senateTradingList = [...originalData]?.slice(0, 50); // 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
+    senateTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
 </script>
 
 <svelte:head>
@@ -296,32 +374,12 @@
                   class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
                 >
                   <thead>
-                    <tr class="bg-default border-b border-[#27272A]">
-                      <th
-                        class="shadow-md text-start bg-default text-white text-sm font-semibold"
-                      >
-                        Person
-                      </th>
-                      <th
-                        class="shadow-md text-end bg-default text-white text-sm font-semibold"
-                      >
-                        Transaction Date
-                      </th>
-                      <th
-                        class="shadow-md text-end bg-default text-white text-sm font-semibold"
-                      >
-                        Amount
-                      </th>
-                      <th
-                        class="shadow-md text-white font-semibold text-end text-sm"
-                        >Type</th
-                      >
-                    </tr>
+                    <TableHeader {columns} {sortOrders} {sortData} />
                   </thead>
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b border-gray-800"
+                        class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800"
                       >
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
@@ -350,12 +408,17 @@
                                   item?.representative?.replace("_", " "),
                                 )}</a
                               >
-                              <span class="text-gray-300">{item?.party}</span>
                             </div>
                           </div>
                           <!--{item?.firstName} {item?.lastName}-->
                         </td>
 
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.party}
+                        </td>
+
                         <td
                           class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >