Merge pull request #382 from Ansh101112/announcement

Announcement Feat Added

backend/index.js

@@ -126,18 +126,37 @@ app.put("/update-notification", authenticateUser, async (req, res) => {
 
 // ANNOUNCEMENT APIS
 // API to get announcements
-app.get("/announcements", async (req, res) => {
+app.post("/announcements", async (req, res) => {
+  // reqyest taken from the frontend connection
+  const { title, message } = req.body;
+  const users = await User.find({}, "email");
+  const emailList = users.map((user) => user.email);
+
+  // Set up Nodemailer transporter
+  const transporter = nodemailer.createTransport({
+    service: "gmail",
+    auth: {
+      user: process.env.EMAIL,
+      pass: process.env.PASS,
+    },
+  });
+
+  const mailOptions = {
+    from: process.env.EMAIL,
+    to: emailList,
+    subject: title,
+    text: message,
+  };
+
   try {
-    const announcements = [
-      { id: 1, message: "System maintenance on Sunday at 2 AM" },
-      { id: 2, message: "New feature release next week" },
-    ];
-    res.status(200).send(announcements);
+    // Send email
+    await transporter.sendMail(mailOptions);
+    res
+      .status(200)
+      .json({ message: "Announcement posted and email sent successfully!" });
   } catch (error) {
-    res.status(500).send({
-      message: "Error occurred when fetching announcements.",
-      error: error.message,
-    });
+    console.error("Error sending email:", error);
+    res.status(500).json({ message: "Error posting announcement" });
   }
 });
 

backend/package.json

@@ -21,7 +21,11 @@
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.4.0",
+<<<<<<< HEAD
+    "nodemailer": "^6.9.13",
+=======
     "nodemailer": "^6.9.14",
+>>>>>>> 53b4556520ccfc77bbb053ad39f15f4f69ced03a
     "nodemon": "^3.1.1",
     "twilio": "^5.1.1"
   },

src/App.js

@@ -17,9 +17,10 @@ import AdminD from "./Dashboards/AdminD";
 import Settings from "./pages/Settings";
 import AccountSettings from "./settings/AccountSettings";
 import NotFoundPage from "./pages/PNF";
+import Announcement from "./components/Announcement";
 import ForgotPassword from "./pages/Forgotpassword.js";
 import ResetPassword from "./pages/ResetPassword.js";
-import ProgressBar from './components/ProgressBar.js';
+import ProgressBar from "./components/ProgressBar.js";
 
 const App = () => {
   return (
@@ -34,6 +35,10 @@ const App = () => {
         <Route path="/user/reset-password/:token" element={<ResetPassword />} />
         <Route element={<PrivateRoute />}>
           <Route path="/admin/dashboard" element={<AdminD></AdminD>} />
+          <Route
+            path="/admin/announcement"
+            element={<Announcement></Announcement>}
+          />
           <Route path="/admin/" element={<AdminD></AdminD>} />
           <Route path="/scanqr" element={<QRCodeVerification />} />
           <Route path="/user/add-products" element={<PForm />} />
@@ -49,7 +54,6 @@ const App = () => {
         <Route path="/user/review" element={<Review />} />
         <Route path="*" element={<NotFoundPage></NotFoundPage>} />
       </Routes>
-
     </>
   );
 };

src/Dashboards/AdminD.js

@@ -49,6 +49,10 @@ const AdminD = () => {
     navigate("/user/settings");
   };
 
+  const handleAnnounce = () => {
+    navigate("/admin/announcement");
+  };
+
   const handleManageDatabase = () => {
     window.open(
       "mongodb+srv://usha15322:SmartSaver%[email protected]/",
@@ -186,6 +190,7 @@ const AdminD = () => {
           <ul>
             {announcements.map((announcement) => (
               <li key={announcement.id} className="py-2 border-b">
+                {announcement.title}
                 {announcement.message}
               </li>
             ))}
@@ -245,8 +250,16 @@ const AdminD = () => {
             </tbody>
           </table>
         </div>
-
-        <div className="px-3 py-4 m-3 shadow-md rounded-lg">
+        <div className="px-3 py-2 border-b shadow-md rounded-lg">
+          <h3>Create Announcements</h3>
+          <button
+            className="rounded-lg bg-blue-500 px-4 m-2 justify-center align-item-center py-2 text-white hover:bg-green-600"
+            onClick={handleAnnounce}
+          >
+            Announncements
+          </button>
+        </div>
+        <div className=" py-4 m-3 shadow-md rounded-lg">
           <h3>Manage Database</h3>
           <button
             className="rounded-lg bg-blue-500 px-4 m-2 justify-center align-item-center py-2 text-white hover:bg-blue-600"

src/components/Announcement.js

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import Navbar from "./Navbar";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Footer from "./Footer";
+import axios from "axios";
+
+const Announcement = () => {
+  const [announcement, setAnnouncement] = useState({
+    title: "",
+    message: "",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setAnnouncement({
+      ...announcement,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await axios.post(
+        "http://localhost:6352/announcements",
+        announcement
+      );
+
+      if (response.status === 200) {
+        toast.success("Alert Raised successfully.");
+        setAnnouncement({ title: "", message: "" });
+      } else {
+        toast.error("Error posting announcement");
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      alert("Error posting announcement");
+    }
+  };
+
+  return (
+    <>
+      <Navbar></Navbar>
+
+      <div className="max-w-md mx-auto mt-10">
+
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+        >
+        <h2>Create Announcements</h2>
+          <div className="mb-4">
+            <label
+              className="block text-gray-700 text-sm font-bold mb-2"
+              htmlFor="title"
+            >
+              Title
+            </label>
+            <input
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              id="title"
+              type="text"
+              name="title"
+              value={announcement.title}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="mb-6">
+            <label
+              className="block text-gray-700 text-sm font-bold mb-2"
+              htmlFor="message"
+            >
+              Message
+            </label>
+            <textarea
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              id="message"
+              name="message"
+              value={announcement.message}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="bg-green-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              type="submit"
+            >
+              Post Announcement
+            </button>
+          </div>
+        </form>
+      </div>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default Announcement;

src/components/Navbar.js

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 const Navbar = () => {
   const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
   const currentUser = JSON.parse(localStorage.getItem("currentUser"));
-  const userRole = currentUser?.role; 
+  const userRole = currentUser?.role;
 
   return (
     <nav className="flex items-center justify-between px-6 py-4">
@@ -32,16 +32,17 @@ const Navbar = () => {
             className="text-lg font-semibold hover:text-green-600"
             to="/admin/dashboard"
           >
-            ADMIN 
+            ADMIN
           </Link>
         )}
+
         {isLoggedIn && (
           <>
             <Link
               className="text-lg font-semibold hover:text-green-600"
               to="/user/dashboard"
             >
-              USER 
+              USER
             </Link>
             <Link
               className="text-lg font-semibold hover:text-green-600"