Admin client dev (#44)

client/src/Services/rightServices.js

@@ -0,0 +1,37 @@
+import thaliaAPI from "../API/thaliaAPI";
+
+export const createRight = async (rightDetails) => {
+    try {
+        const response = await thaliaAPI.post("/admin/rights", rightDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const updateRight = async (rightDetails, rightId) => {
+    try {
+        const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const getRight = async () => {
+    try {
+        const response = await thaliaAPI.get('/admin/rights', {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const getDelete = async (rightId) => {
+    try {
+        const response = await thaliaAPI.delete(`/admin/rights/${rightId}`, {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+
+

client/src/components/AddBody/AddBody.jsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Modal } from "flowbite-react";
+
+function AddBody({ openModal, setOpenModal }) {
+  const [formData, setFormData] = useState({
+    body_name: "",
+    body_desc: "",
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Add New Topic</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Topic</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData.body_name}
+                onChange={handleChange}
+                name="body_name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Provide the Topic Description</h1>
+              <textarea
+                name="body_desc"
+                value={formData.body_desc}
+                onChange={handleChange}
+                id=""
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+            Add Topic
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default AddBody;

client/src/components/AddRight/AddRight.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Modal } from "flowbite-react";
+import { createRight } from "../../Services/rightServices";
 
 // eslint-disable-next-line react/prop-types
 function AddRight({ setOpenModal, openModal }) {
@@ -14,6 +15,20 @@ function AddRight({ setOpenModal, openModal }) {
       [name]: value,
     });
   };
+
+  const handleCreate = async () => {
+    if (!formData.right_name || !formData.right_desc) {
+      console.log("Data fields Missing");
+      return;
+    }
+    try {
+      const response = await createRight(formData);
+      console.log("response in the page", response);
+    } catch (error) {
+      console.log("Error occurred", error);
+    }
+  };
+
   return (
     <>
       <Modal show={openModal} onClose={() => setOpenModal(false)}>
@@ -59,7 +74,10 @@ function AddRight({ setOpenModal, openModal }) {
               />
             </div> */}
           </div>
-          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+          <button
+            className="text-primary border-2 px-2 py-2 rounded-md float-end"
+            onClick={handleCreate}
+          >
             Add Right
           </button>
         </Modal.Body>

client/src/components/CheckReport/CheckReport.jsx

@@ -1,7 +1,12 @@
 import { Modal } from "flowbite-react";
+import { useState } from "react";
 
 // eslint-disable-next-line react/prop-types
 function CheckReport({ openModal, setOpenModal, reportObject }) {
+  const [show, setShow] = useState(false);
+  const handleView = () => {
+    setShow((state) => !state);
+  };
   return (
     <>
       <Modal
@@ -10,38 +15,54 @@ function CheckReport({ openModal, setOpenModal, reportObject }) {
         reportObject={reportObject}
       >
         <Modal.Header className="bg-gray-800">
-          <h1 className="text-white font-bold">Reports</h1>
+          <h1 className="text-white font-bold">User Reports</h1>
         </Modal.Header>
         <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
-
-
           <div className="w-full">
-            <label htmlFor="">
-              <h1 className="text-white py-2">Report Type</h1>
-              <input
-                type="text"
-                disabled
-                className="w-full rounded-md bg-gray-700 text-text"
-                value={""}
-              />
-            </label>
-          </div>
-          <div className="w-full mt-3">
-            <label htmlFor="">
-              <h1 className="text-text py-2">Report Description</h1>
-              <textarea
-                name="right_desc"
-                disabled
-                value={""}
-                rows={8}
-                className="w-full rounded-md bg-gray-700 text-white"
-              ></textarea>
-            </label>
+            <div id="accordion-collapse" data-accordion="collapse">
+              <h2 id="accordion-collapse-heading-1">
+                <button
+                  type="button"
+                  className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 gap-3"
+                  data-accordion-target="#accordion-collapse-body-1"
+                  aria-expanded="true"
+                  aria-controls="accordion-collapse-body-1"
+                  onClick={handleView}
+                >
+                  <span>Personal Harrasment</span>
+                  <svg
+                    data-accordion-icon
+                    className="w-3 h-3 rotate-180 shrink-0"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 10 6"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9 5 5 1 1 5"
+                    />
+                  </svg>
+                </button>
+              </h2>
+              <div
+                id="accordion-collapse-body-1"
+                className={show ? "block" : "hidden"}
+                aria-labelledby="accordion-collapse-heading-1"
+              >
+                <div className="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+                  <p className="mb-2 text-gray-500 dark:text-gray-400">
+                    Flowbite is an open-source library of interactive components
+                    built on top of Tailwind CSS including buttons, dropdowns,
+                    modals, navbars, and more.
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
-
-
-
-
         </Modal.Body>
       </Modal>
     </>

client/src/components/EditBody/EditBody.jsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+import { Modal } from "flowbite-react";
+
+function EditBody({ bodyDetails, openModal, setOpenModal }) {
+  const [formData, setFormData] = useState({
+    body_name: "",
+    body_desc: "",
+  });
+  useEffect(() => {
+    if (bodyDetails) {
+      // eslint-disable-next-line react/prop-types
+      formData.body_name = bodyDetails?.name;
+      // eslint-disable-next-line react/prop-types
+      formData.body_desc = bodyDetails?.description;
+    }
+  }, [formData, bodyDetails]);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Edit Topic</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Topic</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData?.body_name}
+                onChange={handleChange}
+                name="right_name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Topic Description</h1>
+              <textarea
+                name="right_desc"
+                value={formData?.body_desc}
+                onChange={handleChange}
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+            Update
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default EditBody;

client/src/components/Sidebar/Sidebar.jsx

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { MdDashboard } from "react-icons/md";
 import { FaUsers } from "react-icons/fa";
 import { TbFileReport } from "react-icons/tb";
+import { IoBody } from "react-icons/io5";
 function Sidebar() {
   return (
     <>
@@ -28,6 +29,12 @@ function Sidebar() {
               Rights Management
             </Link>
           </button>
+          <button className="flex items-center px-4 py-2 rounded-md w-full mt-8">
+            <IoBody className="text-primary" />
+            <Link className="ml-4 font-bold text-gray-500" to={"/admin/body"}>
+              My Body
+            </Link>
+          </button>
         </div>
       </div>
     </>