test: add empty/loading/error state coverage for ContributionsTab

src/features/dashboard/components/ContributionsTab.test.tsx

@@ -87,12 +87,29 @@ describe('ContributionsTab', () => {
     expect(mockGetProfileContributions).toHaveBeenCalledTimes(1)
   })
 
-  it('shows loading skeletons while contribution items are loading', () => {
+  it('shows loading skeletons while contribution items are loading without flashing empty state', () => {
     mockGetProfileContributions.mockReturnValue(new Promise(() => {}))
 
     renderContributionsTab()
 
     expect(screen.getByLabelText('Loading contributions')).toHaveAttribute('aria-busy', 'true')
+    expect(screen.queryByTestId('contribution-empty-board')).not.toBeInTheDocument()
+    expect(screen.queryByText(/no contributions yet/i)).not.toBeInTheDocument()
+  })
+
+  it('shows a friendly empty state when a user has zero total contributions', async () => {
+    mockGetProfileContributions.mockResolvedValue({ contributions: [] })
+
+    renderContributionsTab()
+
+    const emptyBoard = await screen.findByTestId('contribution-empty-board')
+    expect(emptyBoard).toBeInTheDocument()
+    expect(screen.getByText('No contributions yet')).toBeInTheDocument()
+    expect(screen.getByText(/when you start contributing to projects/i)).toBeInTheDocument()
+
+    // Ensure 4 blank columns are not shown
+    expect(screen.queryByText('No applied contributions')).not.toBeInTheDocument()
+    expect(screen.queryByText('No complete contributions')).not.toBeInTheDocument()
   })
 
   it('shows an empty state for each column that has no matching contributions', async () => {

src/features/dashboard/components/ContributionsTab.tsx

@@ -265,6 +265,25 @@ function ContributionError({ theme, onRetry }: { theme: string; onRetry: () => v
   )
 }
 
+function ContributionEmptyBoard({ theme }: { theme: string }) {
+  return (
+    <div
+      data-testid="contribution-empty-board"
+      className={`text-center py-16 backdrop-blur-[30px] bg-white/[0.12] rounded-[20px] border border-white/20 ${
+        theme === 'dark' ? 'text-[#d4d4d4]' : 'text-[#7a6b5a]'
+      }`}
+    >
+      <div className="w-14 h-14 mx-auto mb-4 opacity-60 flex items-center justify-center rounded-full bg-black/5 dark:bg-white/5">
+        <Star className="w-7 h-7" />
+      </div>
+      <p className="text-[16px] font-semibold">No contributions yet</p>
+      <p className="text-[13px] mt-2 max-w-sm mx-auto opacity-80">
+        When you start contributing to projects, your progress and history will be tracked here.
+      </p>
+    </div>
+  )
+}
+
 function EmptyColumn({ label, theme }: { label: string; theme: string }) {
   return (
     <div
@@ -509,6 +528,8 @@ export function ContributionsTab() {
           <ContributionSkeleton />
         ) : state.status === 'error' ? (
           <ContributionError theme={theme} onRetry={fetchContributions} />
+        ) : state.contributions.length === 0 ? (
+          <ContributionEmptyBoard theme={theme} />
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-5">
             {contributionColumns.map((column) => (