Feature/submit requests

client/src/App.jsx

@@ -9,12 +9,14 @@ import EditAccount from "./Components/EditAccount/EditAccount";
 import EditAccountCMC from "./Components/EditAccount/EditAccountCMC";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import "./config/axios.config.js"
+import "./config/axios.config.js";
 import DashBoardHomeCO from "./Components/Dashboard/DashBoardHomeCO";
+import ServicesDashBoard from "./Components/Dashboard/ServicesDashBoard";
 import DashBoardHomeCR from "./Components/Dashboard/DashBoardHomeCR";
 import PropertyPage from "./Components/Dashboard/Property/PropertyPage";
 import { ChakraProvider } from "@chakra-ui/react";
-
+import ServiceRequestCMC from "./Components/ServiceRequestPageCMC/ServiceRequestCMC";
+import ServiceRequestCMC2 from "./Components/ServiceRequestPageCMC/ServiceRequestCMC2";
 function App() {
   return (
     <>
@@ -33,10 +35,17 @@ function App() {
             />
             <Route path="/DashBoardHomeCO" element={<DashBoardHomeCO />} />
             <Route path="/DashBoardHomeCR" element={<DashBoardHomeCR />} />
+            <Route path="/ServicesDashBoard" element={<ServicesDashBoard />} />
+
             <Route
               path="/DashBoardHomeCMC/property/:id"
               element={<PropertyPage />}
             />
+            <Route path="/ServiceRequestCMC" element={<ServiceRequestCMC />} />
+            <Route
+              path="/ServiceRequestCMC2"
+              element={<ServiceRequestCMC2 />}
+            />
           </Routes>
         </BrowserRouter>
         <ToastContainer />
@@ -46,3 +55,4 @@ function App() {
 }
 
 export default App;
+

client/src/Components/Buttons/SubmitRequestButton.jsx

@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { IoMdAddCircleOutline } from "react-icons/io";
+
+export default function SubmitRequestButton(props) {
+  return (
+    <Link
+      className="flex flex-row items-center gap-2.5 text-white font-semibold bg-[#34A853] hover:bg-green-600
+      px-8 py-4 rounded-md shadow-md"
+      onClick={props.onClick}
+      to={props.to}
+    >
+      <IoMdAddCircleOutline className="font-extrabold" fontWeight={1} size={24} />
+      {props.children}
+    </Link>
+  );
+}
+
+SubmitRequestButton.propTypes = {
+  children: PropTypes.node,
+  to: PropTypes.string.isRequired, 
+  onClick: PropTypes.func,
+};

client/src/Components/Dashboard/CreateRequestForm.jsx

@@ -0,0 +1,93 @@
+import Input from "../Forms/Input.jsx";
+import Label from "../Forms/Label.jsx";
+import { useFormik } from "formik";
+import { useModal } from "../Modals/Modal.jsx";
+import { object, string } from "yup";
+import AddButton from "../Buttons/AddButton.jsx";
+import { toast } from "react-toastify";
+import axios from "axios";
+import PropTypes from "prop-types";
+
+export default function CreateRequestForm({ requestList }) {
+  const { toggle } = useModal();
+  const token = localStorage.getItem("token");
+  const userData = JSON.parse(localStorage.getItem("userData"));
+  const userDataArray = userData ? Object.entries(userData) : [];
+  const userID = userDataArray.length > 1 ? userDataArray[0][1] : "";
+
+  console.log("requests: ", requestList);
+  let requestSchema = object({
+    description: string().required("A description is required"),
+    type: string().required("A request type is required"),
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      user_id: userID,
+      description: "",
+      type: "",
+    },
+    validationSchema: requestSchema,
+    onSubmit: (values) => handleSubmit(values),
+  });
+
+  const errorMessage = (fieldName) => {
+    if (formik.touched[fieldName] && formik.errors[fieldName]) {
+      return (
+        <span className="text-red-400 text-sm">{formik.errors[fieldName]}</span>
+      );
+    }
+    return null;
+  };
+
+  const handleSubmit = async (values) => {
+    console.log(values);
+    await axios
+      .post("http://hortzcloud.com:3000/api/v1/req", values, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        toast.success("Request created successfully!");
+        console.log(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    toggle();
+    // alert(JSON.stringify(values, null, 2));
+  };
+
+  return (
+    <>
+      <form onSubmit={formik.handleSubmit} className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 w-[360px] font-inter h-fit">
+          <Label htmlFor="type">Request Type</Label>
+          {errorMessage("type")}
+          <Input onChange={formik.handleChange} id="type" name="type" />
+        </div>
+        <div className="flex flex-col gap-2 w-[360px] font-inter h-fit">
+          <Label htmlFor="description">Description</Label>
+          {errorMessage("description")}
+          <Input
+            onChange={formik.handleChange}
+            id="description"
+            name="description"
+          />
+        </div>
+      </form>
+
+      <AddButton onClick={formik.submitForm}>Submit Request</AddButton>
+    </>
+  );
+}
+
+CreateRequestForm.propTypes = {
+  requestList: PropTypes.arrayOf(
+    PropTypes.shape({
+      description: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+    })
+  ),
+};

client/src/Components/Dashboard/DashBoardHomeCO.jsx

@@ -36,6 +36,28 @@ const DashBoardHomeCO = () => {
   const userID = userDataArray.length > 1 ? userDataArray[0][1] : "";
   const token = localStorage.getItem("token");
 
+  const [request, setRequest] = useState([]);
+  const getRequestByUserID = () => {
+    axios
+      .get(`http://hortzcloud.com:3000/api/v1/req?userid=${userID}`, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      })
+      .then((requestResponse) => {
+        setRequest(requestResponse.data);
+      })
+      .catch((error) => {
+        console.error("Error fetching requests:", error);
+      });
+  };
+
+  useEffect(() => {
+    if (request.length > 0) {
+      console.log("requests:", request);
+    }
+  }, [request]);
+
   // Fetch parking spots data
   const fetchParkingSpots = () => {
     axios
@@ -46,7 +68,6 @@ const DashBoardHomeCO = () => {
       })
       .then((parkingSpotsResponse) => {
         setParkingSpots(parkingSpotsResponse.data);
-        // console.log(parkingSpotsResponse.data[0]);
         console.log("parking:");
         console.log(parkingSpots);
       })
@@ -65,8 +86,6 @@ const DashBoardHomeCO = () => {
       })
       .then((lockersResponse) => {
         setLockers(lockersResponse.data);
-        // console.log("locker id");
-        // console.log(lockers[0].lockerid);
       })
       .catch((error) => {
         console.error("Error fetching lockers:", error);
@@ -107,12 +126,17 @@ const DashBoardHomeCO = () => {
     fetchLockers();
     fetchCondos();
     fetchCondo();
+    getRequestByUserID();
   }, [token, userID]);
 
   const addPropertyToState = (newProperty) => {
     setProperties((prevProperties) => [...prevProperties, newProperty]);
   };
 
+  const addRequestToState = (newRequest) => {
+    setRequest((prevRequest) => [...prevRequest, newRequest]);
+  };
+
   const toggleDrawer = () => {
     setDrawerOpen(!isDrawerOpen);
   };

client/src/Components/Dashboard/ServicesDashBoard.jsx

@@ -0,0 +1,137 @@
+import  { useState, useEffect } from "react";
+import { RxHamburgerMenu } from "react-icons/rx";
+import "./DashBoardHome.css";
+import Table from "../Tables/Table.jsx";
+import TableHeader from "../Tables/TableHeader.jsx";
+import TableRow from "../Tables/TableRow.jsx";
+import TableCard from "../Cards/Tables/TableCard.jsx";
+import TableCardHeader from "../Cards/Tables/TableCardHeader.jsx";
+import axios from "axios";
+import ModalToggler from "../Modals/ModalToggler.jsx";
+import AddButton from "../Buttons/AddButton.jsx";
+import ModalContent from "../Modals/ModalContent.jsx";
+import Modal from "../Modals/Modal.jsx";
+import ServicesDashBoardHeader from "../Tables/ServicesDashBoardHeader.jsx";
+import CompanyContactDisplayForm from "./CompanyContactDisplayForm.jsx";
+import SideNav from "../SideNav/SideNav.jsx";
+import { IconButton } from "@chakra-ui/react";
+import CreateRequestForm from "./CreateRequestForm.jsx";
+
+  const ServicesDashBoard = () => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const userData = JSON.parse(localStorage.getItem("userData"));
+  const userDataArray = userData ? Object.entries(userData) : [];
+  const userID = userDataArray.length > 1 ? userDataArray[0][1] : "";
+  const token = localStorage.getItem("token");
+
+  const [request, setRequest] = useState([]);
+
+  const getRequestByUserID = () => {
+  // const userIdToFetch = 19;
+    axios
+    .get(`http://hortzcloud.com:3000/api/v1/req?userid=${userID}`, {
+      headers: {
+        authorization: `Bearer ${token}`,
+      },
+    })
+    .then((requestResponse) => {
+      setRequest(requestResponse.data);
+
+        // console.log("requestResponse.data:");
+        // console.log(requestResponse);
+        // console.log("request:");
+        // console.log(request);
+    })
+    .catch((error) => {
+      console.error("Error fetching requests:", error);
+    });
+  };
+
+  useEffect(() => {
+    getRequestByUserID();
+  }, [token, userID]);
+
+  const addRequestToState = (newRequest) => {
+    setRequest((prevRequest) => [...prevRequest, newRequest]);
+  };
+
+  const toggleDrawer = () => {
+    setDrawerOpen(!isDrawerOpen);
+  };
+
+  return (
+    <div className="dashboard__home">
+      <div className="sidedrawer__open"></div>
+      <IconButton
+        onClick={toggleDrawer}
+        icon={<RxHamburgerMenu />}
+        className="fixed top-10 shadow z-50"
+        backgroundColor={"#FFFFFF"}
+        rounded={"0 10px 10px 0"}
+        _hover={{ backgroundColor: "#CCCCCC" }}
+      />
+      <SideNav isOpen={isDrawerOpen} toggleDrawer={toggleDrawer} />
+      <ServicesDashBoardHeader />
+      <div className="container flex flex-col items-center px-24">
+        <div className="flex flex-col justify-center items-center w-full">
+          <Modal>
+            <ModalToggler>
+              <h2 style={{ marginBottom: "20px", fontSize: "20px" }}>
+                Having an issue or want to ask question? Submit a Request <br />
+                <span style={{ marginLeft: "60px" }}>and</span> one of our employees will get back to you
+              </h2>
+            </ModalToggler>
+            <ModalContent
+              title="Company Contact Info"
+              description=""
+              onExit={() => console.log("exit")}
+            >
+              <CompanyContactDisplayForm />
+            </ModalContent>
+          </Modal>
+          <TableCard className={"gap-4"}>
+            <TableCardHeader title={"Your Service Requests"}>
+              <div className="flex items-center gap-4">
+                <Modal>
+                  <ModalToggler>
+                    <AddButton>Submit a Request</AddButton>
+                  </ModalToggler>
+                  <ModalContent
+                    title="Submit a Service Request"
+                    description="Fill the form to submit a service request"
+                    onExit={() => console.log("exit")}
+                  >
+                    <CreateRequestForm onAddProperty={addRequestToState} />
+                  </ModalContent>
+                </Modal>
+              </div>
+            </TableCardHeader>
+            <div>
+              {request.length > 0 && (
+                <Table>
+                  <TableHeader>
+                    <th>Request ID</th>
+                    <th>Request Type</th>
+                    <th>Request Description</th>
+                    <th>Request Status</th>
+                  </TableHeader>
+                  {request.map((req, index) => (
+                    <TableRow key={index}>
+                      <td>{req.request_id}</td>
+                      <td>{req.type}</td>
+                      <td>{req.description}</td>
+                      <td>{req.status}</td>
+                    </TableRow>
+                  ))}
+                </Table>
+              )}
+            </div>
+          </TableCard>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ServicesDashBoard;
+

client/src/Components/Dropdown/Dropdown.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Dropdown = ({ options, value, onChange }) => {
+  return (
+    <select value={value} onChange={onChange} className="dropdown">
+      {options.map((option, index) => (
+        <option key={index} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Dropdown;