similar event update

client/src/pages/EventDetailsPage.tsx

@@ -64,13 +64,28 @@ const EventDetailsPage = () => {
           <h4 className="font-bold text-large">{event.title}</h4>
         </CardHeader>
         <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
-          <img
+        {event.evtPicture && (
-            alt={event.title}
+          <div style={{
-            className="object-cover rounded-xl"
+            width: '100px',
-            src={event.imageUrl}
+            height: '100px',
-            width="100%"
+            overflow: 'hidden',
-            height={300}
+            borderRadius: '8px',
-          />
+            position: 'relative'
+            }}>
+              <img
+                src={`${config.serverAddress}/events/evtPicture/${event.id}`}
+                alt="Event Picture"
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                  position: 'absolute',
+                  top: 0,
+                  left: 0
+               }}
+              />
+          </div>
+        )}
           <p className="text-gray-600 mt-4">{event.description}</p>
           <p className="text-gray-600 mt-2">
             <strong>Date:</strong> {new Date(event.date).toLocaleDateString()}
@@ -114,13 +129,28 @@ const EventDetailsPage = () => {
                   <h4 className="font-bold text-large">{similarEvent.title}</h4>
                 </CardHeader>
                 <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
-                  <img
+                 {similarEvent.evtPicture && (
-                    alt={similarEvent.title}
+                    <div style={{
-                    className="object-cover rounded-xl"
+                      width: '100px',
-                    src={similarEvent.imageUrl}
+                      height: '100px',
-                    width="100%"
+                      overflow: 'hidden',
-                    height={180}
+                      borderRadius: '8px',
-                  />
+                      position: 'relative'
+                    }}>
+                      <img
+                        src={`${config.serverAddress}/events/evtPicture/${similarEvent.id}`}
+                        alt="Event Picture"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                          position: 'absolute',
+                          top: 0,
+                          left: 0
+                        }}
+                      />
+                    </div>
+                  )}
                 </CardBody>
                 <CardFooter className="flex flex-col items-start p-4">
                   <Button

client/src/pages/ManageEventsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Table,
   TableHeader,
@@ -6,8 +6,12 @@ import {
   TableBody,
   TableRow,
   TableCell,
-  Avatar,
   Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
 import { PencilSquareIcon, TrashIcon } from "../icons";
@@ -16,12 +20,13 @@ import config from "../config";
 
 const ManageEventsPage = () => {
   const [events, setEvents] = useState<any[]>([]);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
   const navigate = useNavigate();
 
   const fetchEvents = async () => {
     try {
       const res = await axios.get(config.serverAddress + "/events");
-      console.log("Fetched events data:", res.data); // Debug log
       setEvents(res.data);
     } catch (error) {
       console.error("Failed to fetch events:", error);
@@ -36,10 +41,18 @@ const ManageEventsPage = () => {
     navigate(`editEvent/${id}`);
   };
 
-  const handleDelete = async (id: string) => {
+  const handleDeleteClick = (id: string) => {
+    setSelectedEventId(id);
+    setIsDeleteModalOpen(true);
+  };
+
+  const deleteEvent = async () => {
+    if (selectedEventId === null) return;
     try {
-      await axios.delete(`${config.serverAddress}/events/${id}`);
+      await axios.delete(`${config.serverAddress}/events/${selectedEventId}`);
-      setEvents(events.filter((event) => event.id !== id));
+      setEvents(events.filter((event) => event.id !== selectedEventId));
+      setSelectedEventId(null);
+      setIsDeleteModalOpen(false);
     } catch (error) {
       console.error("Failed to delete event:", error);
     }
@@ -64,30 +77,31 @@ const ManageEventsPage = () => {
           {events.map((event) => (
             <TableRow key={event.id}>
               <TableCell>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <div><span>{event.title}</span></div>
-                {event.evtPicture && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                  <div style={{
+                  {event.evtPicture && (
-                    width: '100px',
+                    <div style={{
-                    height: '100px',
+                      width: '100px',
-                    overflow: 'hidden',
+                      height: '100px',
-                    borderRadius: '8px',
+                      overflow: 'hidden',
-                    position: 'relative'
+                      borderRadius: '8px',
-                  }}>
+                      position: 'relative'
-                    <img
+                    }}>
-                      src={`${config.serverAddress}/events/evtPicture/${event.id}`}
+                      <img
-                      alt="Event Picture"
+                        src={`${config.serverAddress}/events/evtPicture/${event.id}`}
-                      style={{
+                        alt="Event Picture"
-                        width: '100%',
+                        style={{
-                        height: '100%',
+                          width: '100%',
-                        objectFit: 'cover',
+                          height: '100%',
-                        position: 'absolute',
+                          objectFit: 'cover',
-                        top: 0,
+                          position: 'absolute',
-                        left: 0
+                          top: 0,
-                      }}
+                          left: 0
-                    />
+                        }}
+                      />
+                    </div>
+                  )}
                 </div>
-                )}
-              </div>
               </TableCell>
               <TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>
               <TableCell>{event.time}</TableCell>
@@ -108,7 +122,7 @@ const ManageEventsPage = () => {
                     size="sm"
                     variant="flat"
                     color="danger"
-                    onPress={() => handleDelete(event.id)}
+                    onPress={() => handleDeleteClick(event.id)}
                   >
                     <TrashIcon />
                   </Button>
@@ -124,6 +138,33 @@ const ManageEventsPage = () => {
       >
         Add events
       </Button>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+        isDismissable={false}
+        isKeyboardDismissDisabled={true}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Delete Event</ModalHeader>
+              <ModalBody>
+                <p>Are you sure you want to delete this event?</p>
+              </ModalBody>
+              <ModalFooter>
+                <Button onPress={onClose}>
+                  Cancel
+                </Button>
+                <Button onPress={() => { deleteEvent(); onClose(); }}>
+                  Delete
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
     </div>
   );
 };