ui fixes

src/lib/components/SECFilingsCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
 import { afterUpdate } from 'svelte';
+import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 import { fade } from 'svelte/transition';
   
@@ -25,18 +26,19 @@ let accordionOpen = {};
 let newData;
 let isLoaded = false;
 
-function changeSECType(changeType) {
+function changeSECType(index) {
-    switch (changeType) {
+    activeIdx = index;
-        case '8K':
+    switch (activeIdx) {
-            secType = changeType;
+        case 0:
+            secType = '8K';
             prepareData(secFilingsList?.eightK);
             break;
-        case '10K':
+        case 1:
-            secType = changeType;
+            secType = '10K';
             prepareData(secFilingsList?.tenK);
             break;
-        case '10Q':
+        case 2:
-            secType = changeType;
+            secType = '10Q';
             prepareData(secFilingsList?.tenQ);
             break;
         // Default case in case changeType doesn't match any of the specified cases
@@ -114,19 +116,45 @@ async function fetchData() {
 };
 
 
+const tabs = [
+    {
+      title: "8-K",
+    },
+    {
+      title: "10-K",
+    },
+    {
+      title: "10-Q"
+    }
+  ];
+let activeIdx = 0;
 
 
-afterUpdate(async() => {
+$: {
+
   if($stockTicker && typeof window !== 'undefined' && $secFilingsClicked === true) {
+    isLoaded = false;
     $secFilingsClicked = false;
-    await fetchData()
+    activeIdx = 0;
     secType = '8K';
     accordionOpen = {}
+
+    const asyncFunctions = [
+      fetchData()
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
             prepareData(secFilingsList?.eightK);
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+
     isLoaded = true;
     
     }
-})
+
+}
 
 </script>
 
@@ -144,23 +172,51 @@ afterUpdate(async() => {
 
       <div class="w-11/12 mt-5">
         <div class="relative right-0 bg-[#27272A] rounded-lg">
-          <ul class="relative flex flex-wrap p-1 list-none rounded-lg">
+
-            <li class="z-30 flex-auto text-center {secType === '8K' ? 'bg-[#00C806] rounded-lg' : ''}">
+          <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
-              <label on:click={() => changeSECType('8K')} class="border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
+            <AnimateSharedLayout>
-                <span class="ml-1 {secType === '8K' ? 'text-black' : 'text-white'} font-medium">8-K</span>
+              {#each tabs as item, i}
-              </label>
+                <button
-            </li>
+                  on:click={() => changeSECType(i)}
-            <li class="z-30 flex-auto text-center {secType === '10K' ? 'bg-[#0FC008] rounded-lg' : ''}">
+                  class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx === i
-              <label on:click={() => changeSECType('10K')} class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
+                    ? 'z-0'
-                <span class="ml-1 {secType === '10K' ? 'text-black' : 'text-white'} font-medium">10-K</span>
+                    : ''} "
-              </label>
+                  >
-            </li>
+                  {#if activeIdx === i}
-            <li class="z-30 flex-auto text-center {secType === '10Q' ? 'bg-[#0FC008] rounded-lg' : ''}">
+                    <Motion
-              <label on:click={() => changeSECType('10Q')} class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
+                      layoutId="clicked-btn"
-                <span class="ml-1 {secType === '10Q' ? 'text-black' : 'text-white'} font-medium">10-Q</span>
+                      transition={{ duration: 0.2 }}
-              </label>
+                      let:motion
-            </li>
+                    >
-          </ul>
+                      <div
+                        use:motion
+                        class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
+                      ></div>
+                    </Motion>
+                  {/if}
+                  
+                  {#if item?.title === '8-K'}
+                  <span
+                    class="relative block font-medium duration-200 {secType === '8K' ? 'text-black' : 'text-white'}">
+                    {item.title}
+                  </span>
+                  {:else if item?.title === '10-K'}
+                  <span
+                    class="relative block font-medium duration-200 {secType === '10K' ? 'text-black' : 'text-white'}">
+                    {item.title}
+                  </span>
+                  {:else}
+                  <span
+                    class="relative block font-medium duration-200 {secType === '10Q' ? 'text-black' : 'text-white'}">
+                    {item.title}
+                  </span>
+                  {/if}
+
+                </button>
+              {/each}
+            </AnimateSharedLayout>
+          </div>
+
         </div>
       </div>
     </div>

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

@@ -164,7 +164,6 @@ isLoaded = true;
   <!-- Other meta tags -->
   <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) US Congress & Senate Trading · stocknear`}/>
   <meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`} />
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
@@ -172,7 +171,6 @@ isLoaded = true;
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) US Congress & Senate Trading · stocknear`}/>
   <meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -297,7 +295,7 @@ isLoaded = true;
                           </thead>
                           <tbody>
                             {#each senateTradingList as item}
-                            <tr on:click={() => goto(`/politicians/${item?.id}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
+                            <tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#202020] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
     
                               <td class="text-gray-200 pb-3 border-b border-b-[#0F0F0F]">
                                 <div class="flex flex-row items-center">

src/routes/stocks/[tickerID]/+layout.svelte

@@ -510,7 +510,7 @@ $: {
                           {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
                             {$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
                           {:else}
-                          ---
+                           {data?.getStockQuote?.price}
                           {/if}
                         </span>
                     </div>

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

@@ -299,7 +299,7 @@ isLoaded = true;
                           </thead>
                           <tbody>
                             {#each senateTradingList as item}
-                            <tr on:click={() => goto(`/politicians/${item?.id}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
+                            <tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#202020] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
     
                               <td class="text-gray-200 pb-3 border-b border-b-[#0F0F0F]">
                                 <div class="flex flex-row items-center">