[FEAT] Add reusable empty states to dashboard widgets #2646

.github/workflows/auto-unassign.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check assigned issues and unassign stale ones
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/automated-tests.yml

@@ -13,13 +13,13 @@ jobs:
 
     steps:
       - name: Checkout Code Repository Layers
-        uses: actions/checkout@v7
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
 
       - name: Initialize Node.js Environment
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'pnpm'

.github/workflows/ci.yml

@@ -17,11 +17,11 @@ jobs:
     name: Type check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -36,11 +36,11 @@ jobs:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -58,11 +58,11 @@ jobs:
       contents: read
       id-token: write
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -81,7 +81,7 @@ jobs:
 
       - name: Upload coverage to Codecov
         if: hashFiles('coverage/lcov.info') != ''
-        uses: codecov/codecov-action@v7
+        uses: codecov/codecov-action@v4
         with:
           files: ./coverage/lcov.info
           flags: unit
@@ -103,11 +103,11 @@ jobs:
       SUPABASE_SERVICE_ROLE_KEY: placeholder-service-key
       NEXT_PUBLIC_APP_URL: http://localhost:3000
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -122,11 +122,11 @@ jobs:
     name: Dependency audit
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -141,7 +141,7 @@ jobs:
     name: Environment security check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Check SERVICE_ROLE_KEY exposure
         run: bash scripts/check-env-security.sh

.github/workflows/codeql.yml

@@ -24,7 +24,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v7
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v4

.github/workflows/duplicate-issue-check.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check for duplicate issues
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         with:
           script: |
             const issue = context.payload.issue;

.github/workflows/e2e.yml

@@ -26,11 +26,11 @@ jobs:
       PLAYWRIGHT_SERVER_MODE: start
       CI: true
     steps:
-      - uses: actions/checkout@v7
+      - uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm

.github/workflows/gssoc-labels.yml

@@ -18,12 +18,12 @@ jobs:
     if: github.event_name == 'pull_request_target'
     steps:
       - name: Checkout
-        uses: actions/checkout@v7
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Detect and apply type labels
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -106,7 +106,7 @@ jobs:
             }
 
       - name: Post admin checklist comment
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         if: github.event.action == 'opened'
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -147,7 +147,7 @@ jobs:
       github.event.review.state == 'approved'
     steps:
       - name: Check for gssoc:approved label
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-assignment.yml

@@ -15,7 +15,7 @@ jobs:
     if: github.event.issue.pull_request == null
     steps:
       - name: Handle assignment request
-        uses: actions/github-script@v9
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-closed-star.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.issue.state_reason == 'completed'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v9
+      - uses: actions/github-script@v7
         with:
           script: |
             await github.rest.issues.createComment({

.github/workflows/labeler.yml

@@ -9,8 +9,8 @@ jobs:
       issues: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v7
-      - uses: actions/labeler@v6
+      - uses: actions/checkout@v4
+      - uses: actions/labeler@v5
         continue-on-error: true
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/pr-merged-star.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v9
+      - uses: actions/github-script@v7
         with:
           script: |
             await github.rest.issues.createComment({

.github/workflows/pr-star-required.yml

@@ -9,13 +9,14 @@ on:
 permissions:
   pull-requests: write
   statuses: write
+  contents: read
 
 jobs:
   star-gate:
     name: Star required
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v9
+      - uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/stale.yml

@@ -9,7 +9,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v10
+      - uses: actions/stale@v9
         with:
           stale-issue-message: >
             This issue has been inactive for 21 days. If you are still working on it or it is still relevant, please leave a comment — otherwise it will be closed in 7 days.

.github/workflows/visual-regression.yml

@@ -40,13 +40,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v7
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
         run: corepack enable && corepack prepare pnpm@11.12.0 --activate
 
       - name: Setup Node
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -64,7 +64,7 @@ jobs:
         run: npx playwright test -c playwright.visual.config.mjs
 
       - name: Upload visual regression artifacts
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: visual-regression-artifacts

.github/workflows/welcome.yml

@@ -14,7 +14,7 @@ jobs:
   welcome:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v9
+      - uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

src/app/leaderboard/page.tsx

@@ -92,12 +92,13 @@ async function LeaderboardTable({
 
       <section className="overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-[var(--shadow-soft)]">
         {!leaderboard ? (
-          <div className="px-4 py-12 text-center">
-            <p className="text-sm text-[var(--muted-foreground)]">Leaderboard data is temporarily unavailable.</p>
-            <Link href="/leaderboard" className="mt-4 inline-block text-sm font-medium text-[var(--accent)] hover:underline">
-              Retry
-            </Link>
-          </div>
+          <EmptyState
+            icon="⚠️"
+            title="No leaderboard data available"
+            description="Leaderboard data is temporarily unavailable."
+            actionLabel="Sync Dashboard"
+            actionHref="/dashboard"
+          />
         ) : rows.length === 0 ? (
           <EmptyState
             icon="🏆"

src/components/EmptyState.tsx

@@ -1,11 +1,13 @@
 import Link from "next/link";
+import React from "react";
 
 interface EmptyStateProps {
-  icon?: string;
+  icon?: React.ReactNode;
   title: string;
   description: string;
   actionLabel?: string;
   actionHref?: string;
+  actionOnClick?: () => void;
 }
 
 export default function EmptyState({
@@ -14,10 +16,11 @@ export default function EmptyState({
   description,
   actionLabel,
   actionHref,
+  actionOnClick,
 }: EmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center py-20 px-4 text-center">
-      <div className="text-6xl mb-6 select-none" role="img" aria-label={title}>
+      <div className="text-6xl mb-6 select-none flex items-center justify-center" role="img" aria-label={title}>
         {icon}
       </div>
       <h2 className="text-xl font-semibold text-[var(--foreground)] mb-3">
@@ -26,14 +29,23 @@ export default function EmptyState({
       <p className="text-[var(--muted-foreground)] max-w-sm mb-8 leading-relaxed">
         {description}
       </p>
-      {actionLabel && actionHref && (
+      {actionLabel && actionHref && !actionOnClick && (
         <Link
           href={actionHref}
           className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--foreground)] text-[var(--background)] font-medium text-sm hover:opacity-80 transition-opacity"
         >
           {actionLabel} →
         </Link>
       )}
+      {actionLabel && actionOnClick && (
+        <button
+          type="button"
+          onClick={actionOnClick}
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--foreground)] text-[var(--background)] font-medium text-sm hover:opacity-80 transition-opacity cursor-pointer"
+        >
+          {actionLabel} →
+        </button>
+      )}
     </div>
   );
 }

src/components/GoalTracker.tsx

@@ -522,8 +522,8 @@ export default function GoalTracker() {
         <div className="mt-6">
           <EmptyState
             icon="🎯"
-            title="No goals yet"
-            description="No goals yet. Create your first coding goal to start tracking progress!"
+            title="No goals created yet"
+            description="Create your first coding goal to start tracking progress!"
             actionLabel="Create Goal"
             actionHref="#create-goal-form"
           />

src/components/PRBreakdownChart.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
 import { useAccount } from "@/components/AccountContext";
 import WidgetSkeleton, { SkeletonBlock } from "./WidgetSkeleton";
+import EmptyState from "@/components/EmptyState";
 
 interface PRBreakdown {
   draft: number;
@@ -90,9 +91,15 @@ export default function PRBreakdownChart() {
     <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">PR Breakdown</h2>
       {total === 0 ? (
-        <p className="flex h-[200px] items-center justify-center text-sm text-[var(--muted-foreground)]">
-          No pull requests found.
-        </p>
+        <div className="flex h-[200px] items-center justify-center">
+          <EmptyState
+            icon="📊"
+            title="No pull requests available"
+            description="We couldn't find any pull requests for this time period."
+            actionLabel="View GitHub Profile"
+            actionHref={`https://github.com/${selectedAccount || ""}`}
+          />
+        </div>
       ) : (
         <>
           <ResponsiveContainer width="100%" height={200}>