From f208ab1ad0dcdaf9289a338e389912112464a355 Mon Sep 17 00:00:00 2001
From: Raymond Abiola <raymondintell@gmail.com>
Date: Sat, 27 Jun 2026 18:01:55 +0100
Subject: [PATCH] feat: add illustrated zero-state variants to dashboard KPI
 cards

---
 app/(dashboard)/dashboard/page.tsx            | 61 ++++++-------------
 components/active-bets/ActiveBets.tsx         | 20 +++---
 components/cards/stat-card.tsx                | 58 +++++++++++++++---
 .../empty-states/dashboard/active-bets.svg    | 13 ++++
 .../empty-states/dashboard/leaderboard.svg    | 15 +++++
 .../empty-states/dashboard/predictions.svg    | 14 +++++
 .../assets/empty-states/dashboard/volume.svg  | 17 ++++++
 .../empty-states/dashboard/win-rate.svg       | 13 ++++
 8 files changed, 153 insertions(+), 58 deletions(-)
 create mode 100644 public/assets/empty-states/dashboard/active-bets.svg
 create mode 100644 public/assets/empty-states/dashboard/leaderboard.svg
 create mode 100644 public/assets/empty-states/dashboard/predictions.svg
 create mode 100644 public/assets/empty-states/dashboard/volume.svg
 create mode 100644 public/assets/empty-states/dashboard/win-rate.svg

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index f8a0b5a..109d169 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -10,6 +10,8 @@ import { RecommendationProvenance, type RecommendationSignalKey } from "@/compon
 import { Skeleton } from "@/components/ui/skeleton"
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
 import { RecommendationsStrip } from "@/components/dashboard/RecommendationsStrip"
+import { ActiveBets } from "@/components/active-bets/ActiveBets"
+import { ActivityTimeline } from "@/components/activity-timeline"
 import { useEffect, useState } from "react"
 
 interface Stat {
@@ -97,7 +99,8 @@ export default function DashboardPage() {
   }
 
   const renderStatCard = (stat: Stat, idx: number) => {
-    return <StatCard key={idx} stat={stat} index={idx} />
+    const variants: any[] = ['volume', 'predictions', 'win-rate', 'leaderboard'];
+    return <StatCard key={idx} stat={stat} index={idx} emptyVariant={variants[idx % 4]} />
   }
 
   const renderCards = () => {
@@ -112,13 +115,10 @@ export default function DashboardPage() {
         )
       case 'empty':
         return (
-          <div className="flex flex-col items-center justify-center py-8 text-center">
-            <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
-            <p className="text-lg font-medium mb-2">No KPI data available.</p>
-            <p className="text-sm text-muted-foreground mb-4">Create events to generate statistics.</p>
-            <Button asChild>
-              <Link href="/events/new">Create New Event</Link>
-            </Button>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {(['volume', 'predictions', 'win-rate', 'leaderboard'] as const).map((variant, idx) => (
+              <StatCard key={idx} index={idx} status="empty" emptyVariant={variant} />
+            ))}
           </div>
         )
       case 'error':
@@ -359,6 +359,11 @@ export default function DashboardPage() {
         </TabsList>
         <TabsContent value="overview" className="space-y-4">
           {renderCards()}
+          <ActiveBets 
+            bets={status === 'empty' ? [] : []} 
+            isLoading={status === 'loading'}
+            onAddBet={() => console.log('Add bet')}
+          />
           {renderRecommendationStrip()}
           <RecommendationsStrip />
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
@@ -375,42 +380,14 @@ export default function DashboardPage() {
             </Card>
             <Card className="col-span-3">
               <CardHeader>
-                <CardTitle>Pending Tasks</CardTitle>
-                <CardDescription>Tasks requiring admin attention</CardDescription>
+                <CardTitle>Recent Activity</CardTitle>
+                <CardDescription>Your latest actions on Predictify</CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="space-y-4">
-                  <div className="flex items-center gap-4">
-                    <CheckCircle className="h-5 w-5 text-amber-500" />
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium leading-none">8 events need outcome verification</p>
-                      <p className="text-sm text-muted-foreground">Deadline: Today</p>
-                    </div>
-                    <Button variant="outline" size="sm" className="ml-auto">
-                      Verify
-                    </Button>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <HelpCircle className="h-5 w-5 text-red-500" />
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium leading-none">12 disputes need resolution</p>
-                      <p className="text-sm text-muted-foreground">3 high priority</p>
-                    </div>
-                    <Button variant="outline" size="sm" className="ml-auto">
-                      Resolve
-                    </Button>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <TrendingUp className="h-5 w-5 text-green-500" />
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium leading-none">Monthly financial report ready</p>
-                      <p className="text-sm text-muted-foreground">April 2023</p>
-                    </div>
-                    <Button variant="outline" size="sm" className="ml-auto">
-                      View
-                    </Button>
-                  </div>
-                </div>
+                <ActivityTimeline 
+                  activities={status === 'empty' ? [] : []}
+                  isLoading={status === 'loading'}
+                />
               </CardContent>
             </Card>
           </div>
diff --git a/components/active-bets/ActiveBets.tsx b/components/active-bets/ActiveBets.tsx
index 8461d93..6893678 100644
--- a/components/active-bets/ActiveBets.tsx
+++ b/components/active-bets/ActiveBets.tsx
@@ -28,18 +28,22 @@ const ActiveBetCardSkeleton = () => (
 
 // Empty state component
 const EmptyState = ({ onAddBet }: { onAddBet?: () => void }) => (
-  <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
-    <div className="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mb-4">
-      <Plus className="w-8 h-8 text-muted-foreground" />
+  <div className="flex flex-col items-center justify-center py-12 px-4 text-center bg-card/20 backdrop-blur-sm border border-border/50 rounded-2xl">
+    <div className="w-24 h-24 mb-6 relative">
+      <img
+        src="/assets/empty-states/dashboard/active-bets.svg"
+        alt="No active bets"
+        className="w-full h-full object-contain ml-auto mr-auto"
+      />
     </div>
-    <h3 className="text-lg font-semibold text-foreground mb-2">No Active Bets</h3>
-    <p className="text-muted-foreground mb-4 max-w-sm">
-      You don't have any active bets at the moment. Start by placing your first bet!
+    <h3 className="text-xl font-bold text-foreground mb-2">No Active Bets</h3>
+    <p className="text-muted-foreground mb-6 max-w-sm">
+      You haven't placed any bets yet. Explore live markets and start predicting today!
     </p>
     {onAddBet && (
-      <Button onClick={onAddBet} className="bg-primary hover:bg-primary/90">
+      <Button onClick={onAddBet} className="bg-primary hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all hover:scale-105 active:scale-95">
         <Plus className="w-4 h-4 mr-2" />
-        Add Bet
+        Explore Markets
       </Button>
     )}
   </div>
diff --git a/components/cards/stat-card.tsx b/components/cards/stat-card.tsx
index 8b81f3a..830c946 100644
--- a/components/cards/stat-card.tsx
+++ b/components/cards/stat-card.tsx
@@ -5,6 +5,8 @@ import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
+export type StatEmptyVariant = 'volume' | 'predictions' | 'win-rate' | 'leaderboard';
+
 interface StatCardProps {
   stat?: Stat;
   index: number;
@@ -15,23 +17,63 @@ interface StatCardProps {
    * - "error": shows an error alert with a retry button.
    */
   status?: "loading" | "empty" | "error";
+  /** The variant of empty state to show, which determines illustration and copy */
+  emptyVariant?: StatEmptyVariant;
   /** Callback invoked when the retry button is clicked in error state */
   onRetry?: () => void;
 }
 
-export function StatCard({ stat, index, status, onRetry }: StatCardProps) {
+const EMPTY_CONFIGS: Record<StatEmptyVariant, { illustration: string; title: string; description: string; cta: string; href: string }> = {
+  volume: {
+    illustration: "/assets/empty-states/dashboard/volume.svg",
+    title: "No Volume",
+    description: "Start trading to see activity.",
+    cta: "Explore Markets",
+    href: "/events"
+  },
+  predictions: {
+    illustration: "/assets/empty-states/dashboard/predictions.svg",
+    title: "No Predictions",
+    description: "Make your first prediction.",
+    cta: "View Markets",
+    href: "/events"
+  },
+  "win-rate": {
+    illustration: "/assets/empty-states/dashboard/win-rate.svg",
+    title: "0% Win Rate",
+    description: "Win bets to see your rate.",
+    cta: "Place a Bet",
+    href: "/events"
+  },
+  leaderboard: {
+    illustration: "/assets/empty-states/dashboard/leaderboard.svg",
+    title: "Unranked",
+    description: "Compete to climb the ranks.",
+    cta: "Leaderboard",
+    href: "/leaderboard"
+  }
+};
+
+export function StatCard({ stat, index, status, emptyVariant = 'volume', onRetry }: StatCardProps) {
   if (status === "loading") {
-    return <Skeleton className="h-32 w-full rounded-xl" />;
+    return <Skeleton className="h-44 w-full rounded-xl" />;
   }
 
   if (status === "empty") {
+    const config = EMPTY_CONFIGS[emptyVariant];
     return (
-      <div className="flex flex-col items-center justify-center py-8 text-center">
-        <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
-        <p className="text-lg font-medium mb-2">No data available.</p>
-        <p className="text-sm text-muted-foreground mb-4">Create events to generate statistics.</p>
-        <Button asChild>
-          <Link href="/events/new">Create New Event</Link>
+      <div className="flex flex-col items-center justify-center p-6 text-center bg-slate-900/40 backdrop-blur-sm border border-slate-800 rounded-2xl group transition-all duration-300 hover:border-cyan-500/30">
+        <div className="relative w-16 h-16 mb-3">
+          <img
+            src={config.illustration}
+            alt={config.title}
+            className="w-full h-full object-contain filter group-hover:scale-110 transition-transform duration-300"
+          />
+        </div>
+        <p className="text-base font-semibold text-slate-100 mb-1">{config.title}</p>
+        <p className="text-xs text-slate-400 mb-4">{config.description}</p>
+        <Button asChild size="sm" variant="outline" className="h-8 text-xs border-cyan-500/30 hover:bg-cyan-500/10 hover:text-cyan-400">
+          <Link href={config.href}>{config.cta}</Link>
         </Button>
       </div>
     );
diff --git a/public/assets/empty-states/dashboard/active-bets.svg b/public/assets/empty-states/dashboard/active-bets.svg
new file mode 100644
index 0000000..c213205
--- /dev/null
+++ b/public/assets/empty-states/dashboard/active-bets.svg
@@ -0,0 +1,13 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="25" y="35" width="70" height="50" rx="8" stroke="url(#paint0_linear)" stroke-width="2" stroke-dasharray="5 5"/>
+  <circle cx="60" cy="60" r="20" stroke="url(#paint0_linear)" stroke-width="2" opacity="0.3"/>
+  <path d="M60 50V60L65 65" stroke="url(#paint0_linear)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M40 50H50" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+  <path d="M70 70H80" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="25" y1="35" x2="95" y2="85" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A78BFA"/>
+      <stop offset="1" stop-color="#F472B6"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/assets/empty-states/dashboard/leaderboard.svg b/public/assets/empty-states/dashboard/leaderboard.svg
new file mode 100644
index 0000000..7bf7ddb
--- /dev/null
+++ b/public/assets/empty-states/dashboard/leaderboard.svg
@@ -0,0 +1,15 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="20" y="70" width="25" height="30" rx="4" fill="url(#paint0_linear)" opacity="0.4"/>
+  <rect x="47.5" y="40" width="25" height="60" rx="4" fill="url(#paint0_linear)"/>
+  <rect x="75" y="60" width="25" height="40" rx="4" fill="url(#paint0_linear)" opacity="0.6"/>
+  <path d="M60 20L65 30H55L60 20Z" fill="#FBBF24"/>
+  <circle cx="32.5" cy="80" r="5" fill="white" opacity="0.5"/>
+  <circle cx="60" cy="55" r="5" fill="white" opacity="0.5"/>
+  <circle cx="87.5" cy="70" r="5" fill="white" opacity="0.5"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="20" y1="40" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#60A5FA"/>
+      <stop offset="1" stop-color="#3B82F6"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/assets/empty-states/dashboard/predictions.svg b/public/assets/empty-states/dashboard/predictions.svg
new file mode 100644
index 0000000..06d9f9d
--- /dev/null
+++ b/public/assets/empty-states/dashboard/predictions.svg
@@ -0,0 +1,14 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="30" y="30" width="60" height="60" rx="8" stroke="url(#paint0_linear)" stroke-width="2" stroke-dasharray="6 6"/>
+  <path d="M45 50H75" stroke="url(#paint0_linear)" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
+  <path d="M45 60H65" stroke="url(#paint0_linear)" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
+  <path d="M45 70H75" stroke="url(#paint0_linear)" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="85" cy="35" r="15" fill="url(#paint0_linear)" opacity="0.2"/>
+  <path d="M80 35L83 38L90 31" stroke="url(#paint0_linear)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="30" y1="30" x2="90" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#818CF8"/>
+      <stop offset="1" stop-color="#C084FC"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/assets/empty-states/dashboard/volume.svg b/public/assets/empty-states/dashboard/volume.svg
new file mode 100644
index 0000000..033eaa5
--- /dev/null
+++ b/public/assets/empty-states/dashboard/volume.svg
@@ -0,0 +1,17 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50" stroke="url(#paint0_linear)" stroke-width="2" stroke-dasharray="8 8"/>
+  <path d="M40 70L55 55L65 65L80 50" stroke="url(#paint1_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="35" y="75" width="10" height="15" rx="2" fill="url(#paint0_linear)" opacity="0.3"/>
+  <rect x="55" y="70" width="10" height="20" rx="2" fill="url(#paint0_linear)" opacity="0.5"/>
+  <rect x="75" y="60" width="10" height="30" rx="2" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="10" y1="10" x2="110" y2="110" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#22D3EE"/>
+      <stop offset="1" stop-color="#10B981"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear" x1="40" y1="50" x2="80" y2="70" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#22D3EE"/>
+      <stop offset="1" stop-color="#34D399"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/assets/empty-states/dashboard/win-rate.svg b/public/assets/empty-states/dashboard/win-rate.svg
new file mode 100644
index 0000000..5bd4b85
--- /dev/null
+++ b/public/assets/empty-states/dashboard/win-rate.svg
@@ -0,0 +1,13 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M60 20L73 45H47L60 20Z" fill="url(#paint0_linear)" opacity="0.3"/>
+  <circle cx="60" cy="65" r="30" stroke="url(#paint0_linear)" stroke-width="2" stroke-dasharray="4 4"/>
+  <path d="M45 65C45 56.7157 51.7157 50 60 50C68.2843 50 75 56.7157 75 65" stroke="url(#paint0_linear)" stroke-width="5" stroke-linecap="round"/>
+  <path d="M60 50V40" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="60" cy="65" r="5" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="30" y1="20" x2="90" y2="95" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F472B6"/>
+      <stop offset="1" stop-color="#FB923C"/>
+    </linearGradient>
+  </defs>
+</svg>