Display event theme details on the event detail page

Added functionality to show event theme information, including name, description, and preview image, on the event detail page. Integrated `useEventThemes` context and updated utility function `getServerFileUrl` to handle nullable URLs.

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

@@ -24,10 +24,20 @@ import {
   PencilIcon,
   PhoneIcon,
 } from "lucide-react";
+import { useEventThemes } from "@/context/event-theme-context";
+import { getServerFileUrl } from "@/lib/utils";
 
 export default function EventDetailPage() {
   const { slug } = useParams<{ slug: string }>();
   const { event, fetchEventBySlug, isLoadingEvent, eventError } = useEvents();
+  const { themes } = useEventThemes();
+  const currentTheme =
+    event?.theme_id && themes
+      ? themes.find((theme) => theme.id === event.theme_id)
+      : undefined;
+  const currentThemePreviewImage = currentTheme
+    ? getServerFileUrl(currentTheme.preview_image_url)
+    : undefined;
 
   useEffect(() => {
     fetchEventBySlug(slug);
@@ -135,6 +145,41 @@ export default function EventDetailPage() {
                 </p>
               </div>
             )}
+            {event.theme_id && (
+              <div>
+                <h3 className="font-medium mb-2">Theme</h3>
+                <div className="flex items-center gap-4">
+                  {currentTheme ? (
+                    <>
+                      <div className="relative w-16 h-16 rounded overflow-hidden border border-gray-200">
+                        {currentTheme.preview_image_url ? (
+                          <img
+                            src={currentThemePreviewImage}
+                            alt="Theme preview"
+                            className="object-cover w-full h-full"
+                          />
+                        ) : (
+                          <div className="bg-gray-100 dark:bg-gray-800 w-full h-full flex items-center justify-center text-gray-400">
+                            <span>No image</span>
+                          </div>
+                        )}
+                      </div>
+                      <div>
+                        <p className="font-medium">{currentTheme.name}</p>
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {currentTheme.description ||
+                            "No description available"}
+                        </p>
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-gray-500">
+                      Theme information not available
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
 
             <div>
               <h3 className="font-medium mb-2">Date & Time</h3>

frontend/src/lib/utils.ts

@@ -67,6 +67,6 @@ export function formatTime(
   });
 }
 
-export const getServerFileUrl = (url?: string) => {
+export const getServerFileUrl = (url?: string | null) => {
   return url ? `${BACKEND_API_URL}/files/${url}` : undefined;
 };