Enhance event details UI and add date/time format utilities

Refactor event details page with a modernized design using cards, badges, and icons, improving user experience and accessibility. Introduce robust utilities in `/lib/utils.ts` for formatting dates and

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

@@ -2,8 +2,27 @@
 
 import React, { useEffect } from "react";
 import { useParams } from "next/navigation";
-import Navbar from "@/components/layout/navbar";
+import Link from "next/link";
 import { useEvents } from "@/context/event-context";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  CalendarIcon,
+  ClockIcon,
+  LinkIcon,
+  Loader2Icon,
+  MailIcon,
+  MapPinIcon,
+  PhoneIcon,
+} from "lucide-react";
 
 export default function EventDetailPage() {
   const { slug } = useParams<{ slug: string }>();
@@ -15,37 +34,267 @@ export default function EventDetailPage() {
 
   if (isLoadingEvent) {
     return (
-      <>
-        <Navbar />
-        <div className="container">Loading event...</div>
-      </>
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <Loader2Icon className="h-8 w-8 animate-spin text-blue-500" />
+        <span className="ml-2">Loading event details...</span>
+      </div>
     );
   }
 
   if (eventError) {
     return (
-      <>
-        <Navbar />
-        <div className="container">Error: {eventError.message}</div>
-      </>
+      <Card className="max-w-3xl mx-auto">
+        <CardHeader>
+          <CardTitle className="text-red-500">Error</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>There was a problem loading the event: {eventError.message}</p>
+          <Button asChild className="mt-4">
+            <Link href="/dashboard">Return to Dashboard</Link>
+          </Button>
+        </CardContent>
+      </Card>
     );
   }
 
   if (!event) {
     return (
-      <>
-        <Navbar />
-        <div className="container">Event not found!</div>
-      </>
+      <Card className="max-w-3xl mx-auto">
+        <CardHeader>
+          <CardTitle>Event Not Found</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>
+            The event you're looking for doesn't exist or may have been removed.
+          </p>
+          <Button asChild className="mt-4">
+            <Link href="/dashboard">Return to Dashboard</Link>
+          </Button>
+        </CardContent>
+      </Card>
     );
   }
 
   return (
-    <>
-      <div className="container">
-        <h1>{event.title}</h1>
-        <p>{event.description}</p>
+    <div>
+      <header className="mb-8">
+        <h1 className="text-4xl font-bold tracking-tight">{event.title}</h1>
+        <div className="mt-2 flex items-center gap-2">
+          {event.is_public ? (
+            <Badge variant="default">Public</Badge>
+          ) : (
+            <Badge variant="secondary">Private</Badge>
+          )}
+          {event.is_active && (
+            <Badge
+              variant="outline"
+              className="bg-green-50 text-green-700 border-green-200"
+            >
+              Active
+            </Badge>
+          )}
+          {event.rsvp_enabled && (
+            <Badge
+              variant="outline"
+              className="bg-blue-50 text-blue-700 border-blue-200"
+            >
+              RSVP Enabled
+            </Badge>
+          )}
+          {event.gift_registry_enabled && (
+            <Badge
+              variant="outline"
+              className="bg-purple-50 text-purple-700 border-purple-200"
+            >
+              Gift Registry
+            </Badge>
+          )}
+        </div>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle>Event Details</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {event.description && (
+              <div>
+                <h3 className="font-medium mb-2">About</h3>
+                <p className="text-gray-700 dark:text-gray-300">
+                  {event.description}
+                </p>
+              </div>
+            )}
+
+            <div>
+              <h3 className="font-medium mb-2">Date & Time</h3>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <CalendarIcon className="h-4 w-4 text-gray-500" />
+                  <span>{new Date(event.event_date).toLocaleDateString()}</span>
+                </div>
+
+                {(event.event_start_time || event.event_end_time) && (
+                  <div className="flex items-center gap-2">
+                    <ClockIcon className="h-4 w-4 text-gray-500" />
+                    <span>
+                      {event.event_start_time && (
+                        <>
+                          {new Date(event.event_start_time).toLocaleTimeString(
+                            [],
+                            {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            },
+                          )}
+                        </>
+                      )}
+                      {event.event_start_time && event.event_end_time && " - "}
+                      {event.event_end_time && (
+                        <>
+                          {new Date(event.event_end_time).toLocaleTimeString(
+                            [],
+                            {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            },
+                          )}
+                        </>
+                      )}{" "}
+                      <span className="text-sm text-gray-500">
+                        ({event.timezone})
+                      </span>
+                    </span>
+                  </div>
+                )}
+
+                {event.rsvp_deadline && (
+                  <div className="mt-2">
+                    <Badge
+                      variant="outline"
+                      className="bg-yellow-50 text-yellow-700 border-yellow-200"
+                    >
+                      RSVP by{" "}
+                      {new Date(event.rsvp_deadline).toLocaleDateString()}
+                    </Badge>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {(event.location_name || event.location_address) && (
+              <div>
+                <h3 className="font-medium mb-2">Location</h3>
+                <div className="space-y-1">
+                  {event.location_name && (
+                    <p className="font-medium">{event.location_name}</p>
+                  )}
+                  {event.location_address && (
+                    <div className="flex items-center gap-2">
+                      <MapPinIcon className="h-4 w-4 text-gray-500" />
+                      <span>{event.location_address}</span>
+                    </div>
+                  )}
+                  {event.location_url && (
+                    <div className="mt-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        asChild
+                        className="gap-2"
+                      >
+                        <a
+                          href={event.location_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <LinkIcon className="h-4 w-4" />
+                          View Map
+                        </a>
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Contact Information</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {event.contact_email || event.contact_phone ? (
+                <div className="space-y-2">
+                  {event.contact_email && (
+                    <div className="flex items-center gap-2">
+                      <MailIcon className="h-4 w-4 text-gray-500" />
+                      <a
+                        href={`mailto:${event.contact_email}`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        {event.contact_email}
+                      </a>
+                    </div>
+                  )}
+                  {event.contact_phone && (
+                    <div className="flex items-center gap-2">
+                      <PhoneIcon className="h-4 w-4 text-gray-500" />
+                      <a
+                        href={`tel:${event.contact_phone}`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        {event.contact_phone}
+                      </a>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <p className="text-gray-500 text-sm">
+                  No contact information provided
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
+          {event.rsvp_enabled && (
+            <Card>
+              <CardHeader>
+                <CardTitle>RSVP</CardTitle>
+                <CardDescription>
+                  Let the host know if you'll be attending
+                </CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button asChild className="w-full">
+                  <Link href={`/events/${event.slug}/rsvp`}>RSVP Now</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          )}
+
+          {event.gift_registry_enabled && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Gift Registry</CardTitle>
+                <CardDescription>
+                  View gift suggestions for this event
+                </CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button variant="outline" asChild className="w-full">
+                  <Link href={`/events/${event.slug}/gifts`}>
+                    View Gift Registry
+                  </Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          )}
+        </div>
       </div>
-    </>
+    </div>
   );
 }

frontend/src/lib/utils.ts

@@ -1,6 +1,67 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+// in /lib/utils.ts
+
+/**
+ * Formats a date string or Date object into a human-readable date/time format
+ *
+ * @param dateString - ISO date string or Date object to format
+ * @param options - Intl.DateTimeFormatOptions to customize the formatting
+ * @returns Formatted date/time string
+ */
+export function formatDateTime(
+  dateString: string | Date | undefined | null,
+  options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  },
+): string {
+  if (!dateString) return "";
+
+  try {
+    const date =
+      typeof dateString === "string" ? new Date(dateString) : dateString;
+
+    // Check if the date is valid
+    if (isNaN(date.getTime())) {
+      return "";
+    }
+
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return "";
+  }
+}
+
+/**
+ * Formats a date string or Date object as a date only
+ */
+export function formatDate(
+  dateString: string | Date | undefined | null,
+): string {
+  return formatDateTime(dateString, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ * Formats a date string or Date object as time only
+ */
+export function formatTime(
+  dateString: string | Date | undefined | null,
+): string {
+  return formatDateTime(dateString, {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 }