Refactor of dashboard page with breadcrumbs and cleaner component

frontend/src/app/(main)/dashboard/events/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export default function EventsRedirectPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Redirect to dashboard home page
+    router.push("/dashboard");
+  }, [router]);
+
+  // Show a loading state while redirecting
+  return (
+    <div className="flex items-center justify-center min-h-[60vh]">
+      <div className="text-center">
+        <div className="h-8 w-8 mx-auto border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-4"></div>
+        <p className="text-gray-500 dark:text-gray-400">
+          Redirecting to dashboard...
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(main)/dashboard/layout.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useAuth } from "@/context/auth-context";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import { useEffect } from "react";
 import Navbar from "@/components/layout/navbar";
+import Breadcrumbs from "@/components/layout/breadcrumb";
 
 export default function MainLayout({
   children,
@@ -12,6 +13,7 @@ export default function MainLayout({
 }) {
   const { isAuthenticated, isLoading } = useAuth();
   const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
@@ -38,10 +40,20 @@ export default function MainLayout({
     );
   }
 
+  // Don't show breadcrumbs on the main dashboard page
+  const showBreadcrumbs = pathname !== "/dashboard";
+
   return (
     <>
       <Navbar />
-      <div className="container mx-auto px-4 py-12">{children}</div>
+      <div className="container mx-auto px-4 py-12">
+        {showBreadcrumbs && (
+          <div className="mb-6">
+            <Breadcrumbs />
+          </div>
+        )}
+        {children}
+      </div>
     </>
   );
 }

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

@@ -1,27 +1,12 @@
 "use client";
 
-import Navbar from "@/components/layout/navbar";
-import { useEvents } from "@/context/event-context";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Loader2Icon, CalendarIcon, MapPinIcon } from "lucide-react";
-import { EventResponse } from "@/client";
+import { useEvents } from "@/context/event-context";
+import EventsGrid from "@/components/events/events-grid";
 
 export default function DashboardPage() {
-  const {
-    userEvents,
-    isLoadingUserEvents,
-    userEvents: eventsData,
-  } = useEvents();
+  const { userEvents, isLoadingUserEvents } = useEvents();
 
   return (
     <>
@@ -45,72 +30,13 @@ export default function DashboardPage() {
           </div>
         </div>
 
-        {isLoadingUserEvents && (
-          <div className="flex items-center gap-2">
-            <Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
-            <span>Loading your events...</span>
-          </div>
-        )}
-
-        {!isLoadingUserEvents &&
-          userEvents?.items &&
-          userEvents.items.length > 0 && (
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {userEvents.items.map((event: EventResponse) => (
-                <Card
-                  key={event.id}
-                  className="hover:shadow-lg transition-shadow"
-                >
-                  <CardHeader>
-                    <CardTitle>{event.title}</CardTitle>
-                    {event.is_public ? (
-                      <Badge variant="default">Public</Badge>
-                    ) : (
-                      <Badge variant="secondary">Private</Badge>
-                    )}
-                  </CardHeader>
-                  <CardContent>
-                    <CardDescription className="line-clamp-2">
-                      {event.description || "No description provided."}
-                    </CardDescription>
-                    {event.location_address && (
-                      <div className="flex items-center gap-2 mt-2 text-sm text-gray-500 dark:text-gray-400">
-                        <MapPinIcon className="h-4 w-4" />
-                        {event.location_address}
-                      </div>
-                    )}
-                    {event.event_start_time && (
-                      <div className="flex items-center gap-2 mt-1 text-sm text-gray-500 dark:text-gray-400">
-                        <CalendarIcon className="h-4 w-4" />
-                        {new Date(event.event_start_time).toLocaleString()}
-                      </div>
-                    )}
-                  </CardContent>
-                  <CardFooter>
-                    <Button size="sm" asChild>
-                      <Link href={`/dashboard/events/${event.slug}`}>
-                        View Event
-                      </Link>
-                    </Button>
-                  </CardFooter>
-                </Card>
-              ))}
-            </div>
-          )}
-
-        {!isLoadingUserEvents &&
-          (!userEvents?.items || userEvents.items.length === 0) && (
-            <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
-              <p className="text-gray-500 dark:text-gray-400">
-                You haven't created any events yet.
-              </p>
-              <Button asChild className="mt-4">
-                <Link href="/dashboard/events/new">
-                  Create Your First Event
-                </Link>
-              </Button>
-            </div>
-          )}
+        <EventsGrid
+          events={userEvents}
+          isLoading={isLoadingUserEvents}
+          emptyMessage="You haven't created any events yet."
+          emptyActionLink="/dashboard/events/new"
+          emptyActionText="Create Your First Event"
+        />
       </div>
     </>
   );