Refactor of dashboard page with breadcrumbs and cleaner component

frontend/src/components/events/events-grid.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+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";
+
+interface EventsGridProps {
+  events?: {
+    items: EventResponse[];
+  };
+  isLoading?: boolean;
+  emptyMessage?: string;
+  emptyActionLink?: string;
+  emptyActionText?: string;
+}
+
+const EventsGrid: React.FC<EventsGridProps> = ({
+  events,
+  isLoading = false,
+  emptyMessage = "No events found.",
+  emptyActionLink,
+  emptyActionText,
+}) => {
+  return (
+    <>
+      {isLoading && (
+        <div className="flex items-center gap-2">
+          <Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
+          <span>Loading events...</span>
+        </div>
+      )}
+
+      {!isLoading && events?.items && events.items.length > 0 && (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {events.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>
+      )}
+
+      {!isLoading && (!events?.items || events.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">{emptyMessage}</p>
+          {emptyActionLink && emptyActionText && (
+            <Button asChild className="mt-4">
+              <Link href={emptyActionLink}>{emptyActionText}</Link>
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default EventsGrid;