In-process checkin - grants table toggle

apps/web/src/lib/components/profiles/Profile.svelte

@@ -36,7 +36,7 @@
     grants_facets: grantsFacets,
     grants_reference_attachment: grantsReferenceAttachment,
     has_charitable_activities: hasCharitableActivities,
-    grants_current_year_top_20: grantsTop20,
+    grants_current_year_top_20: grantsCurrentTop20,
     grants_all_years_top_20: grantsAllYearsTop20,
   } = profile;
 
@@ -210,7 +210,8 @@
               <div>
                 {#if grantsFacets}
                   <GrantsTable
-                    grants={grants || grantsTop20 || grantsAllYearsTop20}
+                    grantsAllYears={grantsAllYearsTop20}
+                    grantsCurrent={grantsCurrentTop20}
                     grantCount={profile.grant_count}
                     grantCountAllYears={profile.grant_count_all_years}
                     filingsAvailable={profile.filings.length}

apps/web/src/lib/components/profiles/grants/GrantsTable.svelte

@@ -5,42 +5,72 @@
   import { humanizeNumber } from '@shared/functions/formatters/numbers';
   import Tip from '../alerts/Tip.svelte';
   interface Props {
-    grants?: GrantsArray | null;
+    grantsAllYears?: GrantsArray | null;
+    grantsCurrent?: GrantsArray | null;
     grantCount?: number | null;
     grantCountAllYears?: number | null;
     filingsAvailable?: number | null;
     grantsReferenceAttachment: boolean;
   }
 
   let {
-    grants = null,
+    grantsAllYears = null,
+    grantsCurrent = null,
     grantCount = null,
     grantCountAllYears = null,
     filingsAvailable = null,
     grantsReferenceAttachment = false,
   }: Props = $props();
 
-  const numberOfGrantsToDisplay = 5;
+  const numberOfGrantsToDisplay = 10;
+
+  let viewMode: 'all-time' | 'current' = $state('all-time');
+  let grants = $derived(viewMode === 'all-time' ? grantsAllYears : grantsCurrent);
 </script>
 
 <div>
-  {#if grantCountAllYears && grantCountAllYears > 1}
+  {#if grants && grants.length > 0}
     <div class="sm:flex sm:items-center">
       <div class="flex w-full flex-row items-center justify-between">
-        <div class="mt-2 px-3 text-sm text-gray-700">
-          {#if grantCountAllYears <= 5}
-            Showing all {grantCountAllYears} grants listed in <span class="font-bold">{filingsAvailable} years</span> of available tax filings.
-          {:else}
-            Showing the largest <span class="font-bold">{humanizeNumber(numberOfGrantsToDisplay)} grants</span> from
-            <span class="font-bold">{grantCountAllYears ? humanizeNumber(grantCountAllYears) : 'N/A'} grants</span>
-            made across <span class="font-bold">{filingsAvailable} years</span> of available tax filings.
-          {/if}
+        <div class="flex items-center space-x-4">
+          <div class="inline-flex rounded-b-lg border border-slate-200 p-1 hover:cursor-default">
+            <button
+              onclick={() => (viewMode = 'all-time')}
+              class="cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium {viewMode === 'all-time' ?
+                'bg-slate-200 text-slate-700 hover:cursor-default'
+              : 'text-slate-700 hover:text-slate-900'}"
+            >
+              All Time
+            </button>
+            {#if grantsCurrent}
+              <button
+                onclick={() => (viewMode = 'current')}
+                class="cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium {viewMode === 'current' ?
+                  'bg-slate-200 text-slate-700 hover:cursor-default'
+                : 'text-slate-700 hover:text-slate-900'}"
+              >
+                Current Year
+              </button>
+            {/if}
+          </div>
+
+          <p class="text-sm text-slate-700">
+            {#if viewMode === 'all-time'}
+              Showing the largest <span class="font-bold">{numberOfGrantsToDisplay} grants</span> from
+              <span class="font-bold">{grantCountAllYears ? humanizeNumber(grantCountAllYears) : 'N/A'} grants</span> made across
+              <span class="font-bold">{filingsAvailable} years</span>
+            {:else}
+              Showing the largest <span class="font-bold">{numberOfGrantsToDisplay} grants</span> from
+              <span class="font-bold">{grantCount ? humanizeNumber(grantCount) : 'N/A'} grants</span> made in the
+              <span class="font-bold">most recent year</span>
+            {/if}
+          </p>
         </div>
       </div>
     </div>
   {/if}
 
-  <div class="{grantCountAllYears && grantCountAllYears > 1 ? 'mt-8 ' : 'mt-4 '}flow-root">
+  <div class="{grants && grants?.length > 0 ? 'mt-8 ' : 'mt-4 '}flow-root">
     <div class="-my-2 overflow-x-auto sm:-mx-6">
       <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:mb-4 lg:px-8">
         <table class="min-w-full table-auto divide-y divide-gray-300">
@@ -71,7 +101,7 @@
           </tbody>
         </table>
         {#if grantsReferenceAttachment && grantCount === 1}
-          <div class="mt-4 flex w-1/2 justify-center">
+          <div class="mx-auto mt-4 flex">
             <Tip
               title="Grants reference an attachment"
               message="The use of attachments and statements to provide grant details is a holdover from before foundation tax returns were filed electronically. Though unlikely, further grant details may be available in the tax filing itself. "

apps/web/src/routes/profiles/v0/[ein]/+page.server.ts

@@ -44,11 +44,11 @@ const fetchLocalProfile = async (ein: string): Promise<GrantmakersExtractedDataO
       { ein },
       {
         projection: {
-          'pub78._id': 0, // Note: A 500 error occurs if the _id makes it to +page.svelte - likely due to failed interpretation of the BSON $oid
           organization_name_slug: 0,
           organization_names_all_years: 0,
-          grants_current_year_top_20: 0,
           grants_all_years: 0,
+          grants: 0,
+          // grants_current_year_top_20: 0,
         },
       },
     );