feat: implement ticket fetching and error handling in event details page

app/(main)/events/[id]/page.tsx

@@ -158,7 +158,12 @@ export default function EventDetailsPage({ params }: EventDetailsPageProps) {
   }, [event, user, isLoading, router]);
 
   // ADD THESE: Fetch tickets and mutations
-  const { data: ticketsData, isLoading: ticketsLoading } = useEventTicketsQuery(
+  const {
+    data: ticketsData,
+    isLoading: ticketsLoading,
+    isError: isTicketsError,
+    error: ticketsError,
+  } = useEventTicketsQuery(
     { eventId: params.id },
   );
   const createTicketMutation = useCreateEventTicketMutation();
@@ -1377,6 +1382,15 @@ export default function EventDetailsPage({ params }: EventDetailsPageProps) {
               <div className="flex items-center justify-center py-12">
                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
               </div>
+            ) : isTicketsError ? (
+              <div className="text-center py-12">
+                <p className="text-red-600 font-medium">Failed to load tickets.</p>
+                <p className="text-gray-500 mt-1 text-sm">
+                  {ticketsError instanceof Error
+                    ? ticketsError.message
+                    : "Please refresh and try again."}
+                </p>
+              </div>
             ) : tickets.length === 0 ? (
               <div className="text-center py-12">
                 <p className="text-gray-500">{`No tickets created yet. Click "Add Ticket" to create one.`}</p>

lib/api/services/ticketService.ts

@@ -1,5 +1,21 @@
 import { BASE_URL } from "../../config/api";
 import { CreateEventTicketRequest } from "@/lib/types/requests/ticketsRequests";
+import { getStoredToken } from "./authService";
+
+const createAuthHeaders = (
+  additionalHeaders: Record<string, string> = {},
+): Record<string, string> => {
+  const headers: Record<string, string> = {
+    ...additionalHeaders,
+  };
+
+  const token = getStoredToken();
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  return headers;
+};
 
 export const findAllTicketEvents = async (eventId?: string) => {
   const url = new URL(`${BASE_URL}/tickets`);
@@ -9,9 +25,9 @@ export const findAllTicketEvents = async (eventId?: string) => {
 
   const response = await fetch(url.toString(), {
     method: "GET",
-    headers: {
-      "Content-Type": "application/json"
-    },
+    headers: createAuthHeaders({
+      "Content-Type": "application/json",
+    }),
     credentials: "include"
   });
 
@@ -23,9 +39,9 @@ export const findAllTicketEvents = async (eventId?: string) => {
 export const findOneEventTicket = async (id: string) => {
   const response = await fetch(`${BASE_URL}/tickets/${id}`, {
     method: "GET",
-    headers: {
-      "Content-Type": "application/json"
-    },
+    headers: createAuthHeaders({
+      "Content-Type": "application/json",
+    }),
     credentials: "include"
   });
 
@@ -42,9 +58,9 @@ export const createEventTicket = async (ticketData: CreateEventTicketRequest) =>
 
   const response = await fetch(`${BASE_URL}/tickets/create`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
+    headers: createAuthHeaders({
+      "Content-Type": "application/json",
+    }),
     credentials: "include",
     body: JSON.stringify(formattedData)
   });
@@ -60,9 +76,9 @@ export const updateEventTicket = async (
 ) => {
   const response = await fetch(`${BASE_URL}/tickets/update/${id}`, {
     method: "PATCH",
-    headers: {
-      "Content-Type": "application/json"
-    },
+    headers: createAuthHeaders({
+      "Content-Type": "application/json",
+    }),
     credentials: "include",
     body: JSON.stringify(ticketData)
   });
@@ -76,6 +92,7 @@ export const updateEventTicket = async (
 export const deleteEventTicket = async (id: string) => {
   const response = await fetch(`${BASE_URL}/tickets/delete/${id}`, {
     method: "DELETE",
+    headers: createAuthHeaders(),
     credentials: "include"
   });