Add event detail page with dynamic slug support

This commit introduces a new dynamic event detail page under the dashboard. It fetches event data based on the slug using context and handles loading, error, and empty states gracefully. Includes integration with the Navbar component for consistent UI.

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

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useParams } from "next/navigation";
+import Navbar from "@/components/layout/navbar";
+import { useEvents } from "@/context/event-context";
+
+export default function EventDetailPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const { event, fetchEventBySlug, isLoadingEvent, eventError } = useEvents();
+
+  useEffect(() => {
+    fetchEventBySlug(slug);
+  }, [slug, fetchEventBySlug]);
+
+  if (isLoadingEvent) {
+    return (
+      <>
+        <Navbar />
+        <div className="container">Loading event...</div>
+      </>
+    );
+  }
+
+  if (eventError) {
+    return (
+      <>
+        <Navbar />
+        <div className="container">Error: {eventError.message}</div>
+      </>
+    );
+  }
+
+  if (!event) {
+    return (
+      <>
+        <Navbar />
+        <div className="container">Event not found!</div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Navbar />
+      <div className="container">
+        <h1>{event.title}</h1>
+        <p>{event.description}</p>
+      </div>
+    </>
+  );
+}