feat: add consistent empty state components for tasks, grants, and gr…

frontend/src/app/(dashboard)/fundraising/page.tsx

@@ -2,7 +2,8 @@
 
 import React from "react";
 import { motion } from "framer-motion";
-import { HandCoins } from "lucide-react";
+import { HandCoins, CirclePlus } from "lucide-react";
+import EmptyState from "@/components/EmptyState";
 
 export default function FundraisingPage() {
     return (
@@ -26,8 +27,13 @@ export default function FundraisingPage() {
                 </div>
             </motion.div>
 
-            <div className="bg-[#0A0B0F]/40 backdrop-blur-xl rounded-xl sm:rounded-2xl lg:rounded-3xl border border-white/10 p-8 text-center">
-                <p className="text-[#5A6578]">Fundraising module coming soon...</p>
+            <div className="bg-[#0A0B0F]/40 backdrop-blur-xl rounded-xl sm:rounded-2xl lg:rounded-3xl border border-white/10">
+                <EmptyState
+                    icon={CirclePlus}
+                    title="No campaigns yet"
+                    description="Start raising funds for your project. Create your first campaign to get started."
+                    action={{ label: "Create Campaign" }}
+                />
             </div>
         </div>
     );

frontend/src/app/(dashboard)/groups/page.tsx

@@ -2,7 +2,8 @@
 
 import React from "react";
 import { motion } from "framer-motion";
-import { Users } from "lucide-react";
+import { Users, UserPlus } from "lucide-react";
+import EmptyState from "@/components/EmptyState";
 
 export default function GroupsPage() {
     return (
@@ -26,8 +27,13 @@ export default function GroupsPage() {
                 </div>
             </motion.div>
 
-            <div className="bg-[#0A0B0F]/40 backdrop-blur-xl rounded-xl sm:rounded-2xl lg:rounded-3xl border border-white/10 p-8 text-center">
-                <p className="text-[#5A6578]">Groups module coming soon...</p>
+            <div className="bg-[#0A0B0F]/40 backdrop-blur-xl rounded-xl sm:rounded-2xl lg:rounded-3xl border border-white/10">
+                <EmptyState
+                    icon={UserPlus}
+                    title="No groups yet"
+                    description="Create a payment group to split funds and manage distributions with your team."
+                    action={{ label: "Create Group" }}
+                />
             </div>
         </div>
     );

frontend/src/app/(dashboard)/user/transactions/components/EmptyState.tsx

@@ -1,8 +1,12 @@
+import { Receipt } from "lucide-react";
+import BaseEmptyState from "@/components/EmptyState";
+
 export default function EmptyState() {
   return (
-    <div className="flex flex-col items-center justify-center py-12">
-      <div className="text-lg font-semibold">No transactions yet</div>
-      <p className="text-sm text-gray-400">Your transactions will appear here once you start using Paymesh.</p>
-    </div>
+    <BaseEmptyState
+      icon={Receipt}
+      title="No transactions yet"
+      description="Your transactions will appear here once you start using Paymesh."
+    />
   );
 }

frontend/src/components/EmptyState.tsx

@@ -0,0 +1,49 @@
+import { type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+  };
+  className?: string;
+}
+
+export default function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  const content = (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-16 px-6 text-center",
+        className,
+      )}
+    >
+      <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#5B63D6]/20 to-[#5B63D6]/5 border border-[#5B63D6]/15 flex items-center justify-center mb-5">
+        <Icon className="w-7 h-7 text-[#8B92E8]" />
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
+      <p className="text-sm text-[#5A6578] max-w-sm mb-6">{description}</p>
+      {action && (
+        <Button
+          variant="default"
+          className="bg-[#5B63D6] hover:bg-[#4A52C5] text-white px-6 cursor-pointer"
+          onClick={action.onClick}
+        >
+          {action.label}
+        </Button>
+      )}
+    </div>
+  );
+
+  return content;
+}

frontend/src/components/TaskList.tsx

@@ -4,7 +4,9 @@
 import React from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { SearchX } from "lucide-react";
 import type { CompletedTask } from "@/types/task";
+import EmptyState from "@/components/EmptyState";
 
 interface TaskListProps {
   tasks: CompletedTask[];
@@ -13,10 +15,11 @@ interface TaskListProps {
 export function TaskList({ tasks }: TaskListProps) {
   if (tasks.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-20 text-center">
-        <h3 className="text-xl font-semibold text-white mb-2">No tasks found</h3>
-        <p className="text-muted-foreground">Try adjusting your filters to see more results</p>
-      </div>
+      <EmptyState
+        icon={SearchX}
+        title="No tasks found"
+        description="Try adjusting your filters to see more results"
+      />
     );
   }