add shareholder back

src/lib/components/UpgradeToPro.svelte

@@ -7,7 +7,7 @@
 {#if data?.user?.tier !== "Pro"}
   <div class="px-0 flex justify-center items-center">
     <div
-      class="rounded bg-[{color}] pl-10 pr-10 text-center pb-10 pt-5 w-full h-full m-auto -mt-5 relative"
+      class="rounded bg-[{color}] pl-10 pr-10 text-center pb-10 pt-5 w-full h-full m-auto -mt-2 relative"
     >
       <h3 class="text-white font-bold text-xl sm:text-2xl text-center">
         Upgrade to Pro

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

@@ -40,6 +40,7 @@
   if (!displaySubSection || displaySubSection.length === 0) {
     const parts = $page?.url?.pathname.split("/");
     const sectionMap = {
+      institute: "institute",
       "congress-trading": "congress-trading",
       transcripts: "transcripts",
     };
@@ -57,6 +58,7 @@
   function changeSubSection(state) {
     const subSectionMap = {
       "congress-trading": "/insider/congress-trading",
+      institute: "/insider/institute",
       transcripts: "/insider/transcripts",
     };
 
@@ -78,7 +80,7 @@
       >
         <main class="w-full lg:w-3/4">
           <nav
-            class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
+            class="mb-5 sm:mb-0 sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
           >
             <ul class="flex flex-row items-center w-full text-white">
               <a
@@ -91,6 +93,17 @@
                 Insider Trading
               </a>
 
+              <a
+                href={`/stocks/${$stockTicker}/insider/institute`}
+                on:click={() => changeSubSection("institute")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'institute'
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                13F Institute
+              </a>
+
               <a
                 href={`/stocks/${$stockTicker}/insider/congress-trading`}
                 on:click={() => changeSubSection("congress-trading")}

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

@@ -0,0 +1,33 @@
+
+export const load = async ({ locals, params }) => {
+  const { apiURL, apiKey, user } = locals;
+
+  const getShareholderData = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/shareholders", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    let output = await response.json();
+
+    output.shareholders = user?.tier !== "Pro" ? output.shareholders?.slice(0, 3) : output.shareholders;
+
+   
+    return output;
+  };
+
+
+  // Make sure to return a promise
+  return {
+    getShareholderData: await getShareholderData(),
+  };
+};

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import {
+    displayCompanyName,
+    numberOfUnreadNotification,
+    stockTicker,
+  } from "$lib/store";
+
+  import ShareHolders from "$lib/components/ShareHolders.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading ·
+    stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-6">
+          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
+            13F Institute Ownership
+          </h1>
+        </div>
+
+        <ShareHolders {data} />
+      </div>
+    </div>
+  </div>
+</section>