Feat/empty

package.json

@@ -16,6 +16,7 @@
     "@reduxjs/toolkit": "^2.11.2",
     "axios": "^1.13.6",
     "lucide-react": "^0.577.0",
+    "prop-types": "^15.8.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.2",

src/components/common/EmptyState.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './button';
+
+const EmptyState = ({ icon, title, description, actionLabel, onAction }) => {
+  return (
+    <div className="text-center">
+      {icon && <div className="mb-4">{icon}</div>}
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <p className="text-gray-500 mb-4">{description}</p>
+      {actionLabel && onAction && (
+        <Button onClick={onAction} variant="primary">
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+EmptyState.propTypes = {
+  icon: PropTypes.node,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  actionLabel: PropTypes.string,
+  onAction: PropTypes.func,
+};
+
+export default EmptyState;

src/components/dashboard/RecentCampaigns.jsx

@@ -4,9 +4,11 @@ import { ArrowRight, PlusCircle, LayoutGrid } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { fetchRecentCampaigns } from '../../features/dashboard/dashboardThunks';
 import {
+  import {
   selectRecentCampaigns,
   selectDashboardLoading,
 } from '../../features/dashboard/dashboardSelectors';
+import EmptyState from '../common/EmptyState';
 
 // ─── Status badge config ──────────────────────────────────────────────────────
 const STATUS_BADGE = {
@@ -105,22 +107,13 @@ export default function RecentCampaigns() {
             ))}
           </div>
         ) : recent.length === 0 ? (
-          // Empty state
-          <div className="flex flex-col items-center gap-3 py-10 text-slate-400">
-            <LayoutGrid className="w-12 h-12 text-slate-300" />
-            <p className="text-sm font-medium text-slate-600">No campaigns yet</p>
-            <p className="text-xs text-slate-400 text-center max-w-xs">
-              You have not created any campaigns. Launch your first one and start
-              collecting donations.
-            </p>
-            <Link
-              to="/campaigns/create"
-              className="mt-2 flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 transition-colors"
-            >
-              <PlusCircle className="w-4 h-4" />
-              Create Your First Campaign
-            </Link>
-          </div>
+          <EmptyState
+            icon={<LayoutGrid className="w-12 h-12 text-slate-300" />}
+            title="No campaigns yet"
+            description="You have not created any campaigns. Launch your first one and start collecting donations."
+            actionLabel="Create Your First Campaign"
+            onAction={() => (window.location.href = '/campaigns/create')}
+          />
         ) : (
           // Campaign cards grid
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

src/pages/dashboard/MyBookmarksPage.jsx

@@ -0,0 +1,21 @@
+import { BookmarkX } from 'lucide-react';
+import EmptyState from '../../components/common/EmptyState';
+
+export default function MyBookmarksPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-slate-900">My Bookmarks</h1>
+      <p className="text-slate-500 mt-1">Your bookmarked campaigns will appear here.</p>
+
+      <div className="mt-8">
+        <EmptyState
+          icon={<BookmarkX className="w-12 h-12 text-slate-300" />}
+          title="No bookmarks yet"
+          description="You haven't bookmarked any campaigns yet. Browse campaigns and bookmark your favorites."
+          actionLabel="Browse Campaigns"
+          onAction={() => (window.location.href = '/campaigns')}
+        />
+      </div>
+    </div>
+  );
+}

src/routes/AppRouter.jsx

@@ -26,6 +26,7 @@ const Admin = lazy(() => import('../pages/Admin'));
 // Dashboard sub-pages
 const DashboardPage    = lazy(() => import('../pages/dashboard/DashboardPage'));
 const MyCampaignsPage  = lazy(() => import('../pages/dashboard/MyCampaignsPage'));
+const MyBookmarksPage = lazy(() => import('../pages/dashboard/MyBookmarksPage'));
 const DonationsPage    = lazy(() => import('../pages/dashboard/DonationsPage'));
 const WalletPage       = lazy(() => import('../pages/dashboard/WalletPage'));
 const SettingsPage     = lazy(() => import('../pages/dashboard/SettingsPage'));
@@ -70,6 +71,7 @@ const AppRouter = () => {
             }>
               <Route index element={<DashboardPage />} />
               <Route path="campaigns" element={<MyCampaignsPage />} />
+              <Route path="bookmarks" element={<MyBookmarksPage />} />
               <Route path="donations" element={<DonationsPage />} />
               <Route path="wallet" element={<WalletPage />} />
               <Route path="settings" element={<SettingsPage />} />