soft delete code added

frontend/src/Page5.css

@@ -122,6 +122,21 @@ html, body {
   padding: 10px;
 }
 
+.soft-delete-button {
+  background-color: #d9534f;
+  color: white;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.soft-delete-button:hover {
+  background-color: #c9302c;
+}
+
+
 /* Meeting Cards */
 .meeting-card {
   background-color: var(--white);

frontend/src/Page5.js

@@ -1,4 +1,4 @@
-//Page5.js
+// Page5.js
 
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -12,10 +12,9 @@ const Page5 = () => {
   const [meetings, setMeetings] = useState([]);
   const [expandedIndex, setExpandedIndex] = useState(null);
 
-  useEffect(() => {
+  const fetchMeetings = () => {
     axios.get('http://localhost:5000/api/meetings')
       .then((response) => {
-        // Sort meetings by date (newest first) and time
         const sortedMeetings = response.data.sort((a, b) => {
           const dateA = new Date(`${a.date}T${a.startTime}`);
           const dateB = new Date(`${b.date}T${b.startTime}`);
@@ -26,22 +25,35 @@ const Page5 = () => {
       .catch((error) => {
         console.error('Error fetching meetings:', error);
       });
+  };
+
+  useEffect(() => {
+    fetchMeetings();
   }, []);
 
   const toggleExpand = (index) => {
     setExpandedIndex(prev => (prev === index ? null : index));
   };
 
+  const handleSoftDelete = async (id) => {
+    try {
+      await axios.patch(`http://localhost:5000/api/meetings/${id}/soft-delete`);
+      alert('Meeting soft deleted!');
+      fetchMeetings();
+    } catch (error) {
+      console.error('Error deleting meeting:', error);
+      alert('Soft delete failed.');
+    }
+  };
+
   return (
     <div className="page-container">
-      {/* Header Bar */}
       <header className="header-bar">
         <img src={image} alt="Left Logo" className="leftlogo" />
         <h1 className="college-name">Somaiya Scheduler</h1>
         <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
       </header>
 
-      {/* Navigation Bar */}
       <nav className="navbar">
         <ul>
           <li><Link to="/page2">Home</Link></li>
@@ -53,10 +65,9 @@ const Page5 = () => {
         </ul>
       </nav>
 
-      {/* Main Content */}
       <div className="meetings-page-container">
         <h1 className="page-title">Meeting Details</h1>
-        
+
         {meetings.length === 0 ? (
           <p className="no-meetings">No meetings available</p>
         ) : (
@@ -141,6 +152,18 @@ const Page5 = () => {
                       >
                         Add to Google Calendar
                       </a>
+
+                      {/* ✅ Soft Delete Button */}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleSoftDelete(meeting._id);
+                        }}
+                        className="soft-delete-button"
+                      >
+                        Delete Meeting
+                      </button>
+
                     </div>
                   )}
                 </div>
@@ -150,7 +173,6 @@ const Page5 = () => {
         )}
       </div>
 
-      {/* Footer */}
       <footer>
         <div className="terms">
           <a href="#">Terms and Policies</a>
@@ -161,4 +183,4 @@ const Page5 = () => {
   );
 };
 
-export default Page5;
+export default Page5;