Add Badge component and update axios to 1.8.3

Introduce a reusable Badge component with variant support for consistent UI styling. Additionally, upgrade axios from version 1.8.1 to 1.8.3 to include the latest fixes and improvements.

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

@@ -1,24 +1,27 @@
-// src/app/(main)/dashboard/page.tsx
 "use client";
 
-import { useAuth } from "@/context/auth-context";
 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";
 
 export default function DashboardPage() {
-  const { user, isLoading } = useAuth();
+  const {
-
+    userEvents,
-  // Show loading state
+    isLoadingUserEvents,
-  if (isLoading) {
+    userEvents: eventsData,
-    return (
+  } = useEvents();
-      <div className="min-h-screen flex items-center justify-center">
-        <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"></div>
-          <p className="mt-2">Loading...</p>
-        </div>
-      </div>
-    );
-  }
 
   return (
     <>
@@ -27,28 +30,79 @@ export default function DashboardPage() {
         <div className="max-w-7xl mx-auto">
           <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
 
-          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
+          <div className="mb-8">
-            <h2 className="text-xl font-semibold mb-4">
+            <h2 className="text-xl font-semibold">Your Events</h2>
-              Welcome, {user?.first_name || "User"}!
+            <p className="text-gray-500 dark:text-gray-400">
-            </h2>
+              Manage your scheduled events.
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              You are now logged in to EventSpace.
             </p>
+          </div>
 
-            <div className="mt-8">
+          {isLoadingUserEvents && (
-              <h3 className="text-lg font-medium mb-4">Your Events</h3>
+            <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">
-                  No events yet
+                  You haven't created any events yet.
                 </p>
-                <Link href="/dashboard/events/new">
+                <Button asChild className="mt-4">
-                  <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
+                  <Link href="/dashboard/events/new">
                     Create Your First Event
-                  </button>
+                  </Link>
-                </Link>
+                </Button>
               </div>
-            </div>
+            )}
-          </div>
         </div>
       </div>
     </>