My Funding Component Cleanup

app/fund/dashboard/FunderDashboardContent.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { FundsGiven } from '@/components/Funding/dashboard/FundsGiven';
+import { useUser } from '@/contexts/UserContext';
+
+export function FunderDashboardContent() {
+  const router = useRouter();
+  const { user, isLoading: isLoadingUser } = useUser();
+
+  useEffect(() => {
+    if (!isLoadingUser && !user) {
+      router.replace('/');
+    }
+  }, [isLoadingUser, router, user]);
+
+  if (isLoadingUser || !user) return null;
+
+  const firstName = user.firstName?.trim();
+
+  return (
+    <>
+      <div className="mb-5">
+        <h1 className="text-2xl font-semibold tracking-tight text-gray-900">
+          {firstName ? `Welcome back, ${firstName}.` : 'Welcome back.'}
+        </h1>
+        <p className="mt-1 text-sm text-gray-500">Here&apos;s where your funding stands today.</p>
+      </div>
+      <FundsGiven userId={user.id} isModerator={!!user.isModerator} />
+    </>
+  );
+}

app/fund/dashboard/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { PageLayout } from '@/app/layouts/PageLayout';
-import { FunderDashboardPage } from '@/components/Funding/dashboard/FunderDashboardPage';
 import { buildOpenGraphMetadata } from '@/lib/metadata';
+import { FunderDashboardContent } from './FunderDashboardContent';
 
 export const metadata: Metadata = buildOpenGraphMetadata({
   title: 'Funder Dashboard',
@@ -11,8 +11,8 @@ export const metadata: Metadata = buildOpenGraphMetadata({
 
 export default function FunderDashboardRoute() {
   return (
-    <PageLayout rightSidebar={false} wideContent>
-      <FunderDashboardPage />
+    <PageLayout rightSidebar={false} wideContent className="px-4 py-6 tablet:px-8">
+      <FunderDashboardContent />
     </PageLayout>
   );
 }

app/my-funding/components/FundsReceivedTab.tsx → app/my-funding/components/FundsReceived.tsx

@@ -14,7 +14,7 @@ import { transformContributionToFeedEntry } from '@/types/contribution';
 import type { FeedEntry } from '@/types/feed';
 import { cn } from '@/utils/styles';
 
-interface FundsReceivedTabProps {
+interface FundsReceivedProps {
   userId: number;
   authorId?: number;
 }
@@ -164,7 +164,7 @@ function PeerReviews({ authorId }: Readonly<{ authorId?: number }>) {
   );
 }
 
-export function FundsReceivedTab({ userId, authorId }: Readonly<FundsReceivedTabProps>) {
+export function FundsReceived({ userId, authorId }: Readonly<FundsReceivedProps>) {
   const router = useRouter();
 
   const browsePeerReviewBounties = () => {

app/my-funding/components/MyFundingPage.tsx

@@ -4,11 +4,11 @@ import { useEffect, type ReactNode } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ArrowDownLeft, ArrowUpRight } from 'lucide-react';
 import { PageLayout } from '@/app/layouts/PageLayout';
-import { FunderDashboardPage } from '@/components/Funding/dashboard/FunderDashboardPage';
+import { FundsGiven } from '@/components/Funding/dashboard/FundsGiven';
 import { Icon } from '@/components/ui/icons/Icon';
 import { Tabs } from '@/components/ui/Tabs';
 import { useUser } from '@/contexts/UserContext';
-import { FundsReceivedTab } from './FundsReceivedTab';
+import { FundsReceived } from './FundsReceived';
 
 type MyFundingTab = 'given' | 'received';
 
@@ -121,8 +121,9 @@ export function MyFundingPage() {
   const searchParams = useSearchParams();
   const { user, isLoading: isLoadingUser } = useUser();
   const activeTab = resolveMyFundingTab(searchParams.get('tab'));
+  const isModerator = !!user?.isModerator;
   const hasModeratorOverrideOnReceivedTab =
-    activeTab === 'received' && user?.isModerator === true && searchParams.has('funder_id');
+    activeTab === 'received' && isModerator && searchParams.has('funder_id');
 
   useEffect(() => {
     if (isLoadingUser) return;
@@ -153,9 +154,9 @@ export function MyFundingPage() {
   return (
     <PageLayout rightSidebar={false} wideContent topBanner={<MyFundingHero tabBar={tabBar} />}>
       {activeTab === 'given' ? (
-        <FunderDashboardPage embedded />
+        <FundsGiven userId={user.id} isModerator={isModerator} />
       ) : (
-        <FundsReceivedTab userId={user.id} authorId={user.authorProfile?.id} />
+        <FundsReceived userId={user.id} authorId={user.authorProfile?.id} />
       )}
     </PageLayout>
   );

components/Funding/dashboard/FunderDashboardPage.tsx → components/Funding/dashboard/FundsGiven.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Plus } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
@@ -10,39 +10,30 @@ import { FundedProposalsSection } from '@/components/Funding/dashboard/FundedPro
 import { FeedContent } from '@/components/Feed/FeedContent';
 import { FunderService } from '@/services/funder.service';
 import { useFeed } from '@/hooks/useFeed';
-import { useUser } from '@/contexts/UserContext';
 import { FunderOverview } from '@/types/funder';
 import {
   SearchableUserSingleSelect,
   UserOption,
 } from '@/components/ui/form/SearchableUserSingleSelect';
 
-function parseFunderIdParam(raw: string | null): number | undefined {
-  if (!raw) return undefined;
-  const n = Number(raw);
-  return Number.isFinite(n) && n > 0 ? n : undefined;
+function parseFunderIdParam(funderIdParam: string | null): number | undefined {
+  if (!funderIdParam) return undefined;
+  const funderId = Number(funderIdParam);
+  return Number.isFinite(funderId) && funderId > 0 ? funderId : undefined;
 }
 
-interface FunderDashboardPageProps {
-  embedded?: boolean;
+interface FundsGivenProps {
+  userId: number;
+  isModerator: boolean;
 }
 
-export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = false }) => {
+export function FundsGiven({ userId, isModerator }: Readonly<FundsGivenProps>) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { user, isLoading: isLoadingUser } = useUser();
-  const userId = user?.id;
 
-  useEffect(() => {
-    if (!isLoadingUser && !user) {
-      router.replace('/');
-    }
-  }, [isLoadingUser, user, router]);
-
-  const funderIdOverride = user?.isModerator
-    ? parseFunderIdParam(searchParams.get('funder_id'))
-    : undefined;
-  const funderId = funderIdOverride ?? userId;
+  const funderId = isModerator
+    ? (parseFunderIdParam(searchParams.get('funder_id')) ?? userId)
+    : userId;
 
   const [selectedUser, setSelectedUser] = useState<UserOption | null>(null);
 
@@ -67,13 +58,7 @@ export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = f
     () => ({
       endpoint: 'grant_feed' as const,
       contentType: 'GRANT',
-      // The override `funderId` is resolved at the call site and passed in
-      // as `created_by` so we don't have to duplicate the override logic in
-      // the lower-level services.
       createdBy: funderId,
-      // Defer the initial fetch until funderId is known so we don't fire a
-      // first request without `created_by` and a second with it.
-      enabled: funderId != null,
     }),
     [funderId]
   );
@@ -86,7 +71,6 @@ export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = f
   } = useFeed('all', grantFeedOptions);
 
   useEffect(() => {
-    if (isLoadingUser || !user) return;
     let cancelled = false;
     setIsLoadingOverview(true);
     FunderService.getFundingOverview(funderId)
@@ -102,19 +86,22 @@ export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = f
     return () => {
       cancelled = true;
     };
-  }, [funderId, isLoadingUser, user]);
+  }, [funderId]);
 
-  if (isLoadingUser || !user) return null;
-
-  const firstName = user.firstName?.trim();
+  let overviewContent: ReactNode = null;
+  if (isLoadingOverview) {
+    overviewContent = (
+      <div className="h-[320px] rounded-xl border border-gray-200 bg-gray-50 animate-pulse" />
+    );
+  } else if (overview) {
+    overviewContent = <FunderHero overview={overview} />;
+  }
 
   return (
-    <div className={embedded ? undefined : 'px-4 tablet:px-8 py-6 max-w-[1180px] mx-auto w-full'}>
-      {user.isModerator && (
+    <>
+      {isModerator && (
         <div className="mb-5 max-w-xs">
-          <label className="text-xs font-medium text-gray-500 mb-1 block">
-            View as user (moderator only)
-          </label>
+          <p className="mb-1 text-xs font-medium text-gray-500">View as user (moderator only)</p>
           <SearchableUserSingleSelect
             value={selectedUser}
             onChange={handleUserSelect}
@@ -123,22 +110,9 @@ export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = f
         </div>
       )}
 
-      {!embedded && (
-        <div className="mb-5">
-          <h1 className="text-2xl font-semibold tracking-tight text-gray-900">
-            {firstName ? `Welcome back, ${firstName}.` : 'Welcome back.'}
-          </h1>
-          <p className="text-sm text-gray-500 mt-1">Here&apos;s where your funding stands today.</p>
-        </div>
-      )}
-
-      {isLoadingOverview ? (
-        <div className="h-[320px] rounded-xl border border-gray-200 bg-gray-50 animate-pulse" />
-      ) : overview ? (
-        <FunderHero overview={overview} />
-      ) : null}
+      {overviewContent}
 
-      {funderId && <FunderAuthorPostsSection funderId={funderId} className="mt-6" />}
+      <FunderAuthorPostsSection funderId={funderId} className="mt-6" />
 
       <div className="mt-6">
         <div className="mb-4 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2">
@@ -194,6 +168,6 @@ export const FunderDashboardPage: FC<FunderDashboardPageProps> = ({ embedded = f
       {overview && (
         <FundedProposalsSection proposals={overview.supportedProposals} className="mt-8" />
       )}
-    </div>
+    </>
   );
-};
+}