diff --git a/client/src/App.jsx b/client/src/App.jsx
index 41b9c9a6..31e88ad2 100644
--- a/client/src/App.jsx
+++ b/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() {
/>
} />
} />
+ } />
+
}
/>
+ } />
+ }
+ />
@@ -46,3 +55,4 @@ function App() {
}
export default App;
+
diff --git a/client/src/Components/Buttons/SubmitRequestButton.jsx b/client/src/Components/Buttons/SubmitRequestButton.jsx
new file mode 100644
index 00000000..6b4175de
--- /dev/null
+++ b/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 (
+
+
+ {props.children}
+
+ );
+}
+
+SubmitRequestButton.propTypes = {
+ children: PropTypes.node,
+ to: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+};
diff --git a/client/src/Components/Dashboard/CreateRequestForm.jsx b/client/src/Components/Dashboard/CreateRequestForm.jsx
new file mode 100644
index 00000000..3dea1300
--- /dev/null
+++ b/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 (
+ {formik.errors[fieldName]}
+ );
+ }
+ 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 (
+ <>
+
+
+ Submit Request
+
+ );
+}
+
+CreateRequestForm.propTypes = {
+ requestList: PropTypes.arrayOf(
+ PropTypes.shape({
+ description: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ })
+ ),
+};
diff --git a/client/src/Components/Dashboard/DashBoardHomeCO.jsx b/client/src/Components/Dashboard/DashBoardHomeCO.jsx
index 09c67e52..aadaa8af 100644
--- a/client/src/Components/Dashboard/DashBoardHomeCO.jsx
+++ b/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);
};
diff --git a/client/src/Components/Dashboard/ServicesDashBoard.jsx b/client/src/Components/Dashboard/ServicesDashBoard.jsx
new file mode 100644
index 00000000..914d8536
--- /dev/null
+++ b/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 (
+
+
+
}
+ className="fixed top-10 shadow z-50"
+ backgroundColor={"#FFFFFF"}
+ rounded={"0 10px 10px 0"}
+ _hover={{ backgroundColor: "#CCCCCC" }}
+ />
+
+
+
+
+
+
+
+ Having an issue or want to ask question? Submit a Request
+ and one of our employees will get back to you
+
+
+ console.log("exit")}
+ >
+
+
+
+
+
+
+
+
+ Submit a Request
+
+ console.log("exit")}
+ >
+
+
+
+
+ {request.length > 0 && (
+
+
+ | Request ID |
+ Request Type |
+ Request Description |
+ Request Status |
+
+ {request.map((req, index) => (
+
+ {req.request_id} |
+ {req.type} |
+ {req.description} |
+ {req.status} |
+
+ ))}
+
+ )}
+
+
+
+
+
+
}
+ className="fixed top-10 shadow z-50"
+ backgroundColor={"#FFFFFF"}
+ rounded={"0 10px 10px 0"}
+ _hover={{ backgroundColor: "#CCCCCC" }}
+ />
+
+
+
+
+
+
+
+
+ | User Name |
+ User Role |
+ |
+
+ {allOwners.map((owner, index) => (
+
+ {owner.first_name + " " + owner.last_name} |
+ {owner.role} |
+
+
+
+ View Requests
+
+ console.log("exit", owner.ownerid)}
+ >
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
}
+ className="fixed top-10 shadow z-50"
+ backgroundColor={"#FFFFFF"}
+ rounded={"0 10px 10px 0"}
+ _hover={{ backgroundColor: "#CCCCCC" }}
+ />
+
+
+
+
+
+
+
+ | User ID |
+ Request Type |
+ Status |
+ |
+ |
+
+ {currentRequests.map((request, index) => (
+
+ {request.user_id} |
+ {request.type} |
+ {request.status} |
+
+
+
+ View Details
+
+ console.log("exit")}
+ >
+
+
+
+ |
+
+ deleteRequest(request)}>
+ Delete
+
+ |
+
+ ))}
+
+
+
+ {`Showing ${indexOfFirstRequest + 1} to ${indexOfLastRequest > requests.length ? requests.length : indexOfLastRequest} of ${requests.length}`}
+
+
+
+
+
+
+
+
+
+
+
+
+ | Request Description |
+ Set Status |
+
+
+ {request.description} |
+
+
+ updateRequestStatus(request.request_id, e.target.value)
+ }
+ />
+ |
+
+
+
+ {/* Request a Service section */}
+
+ Request a Service
+
+
+
+ {/* Keep the notification section */}
+
+
+ {showDropdown && (
+
+ {notifications.map((notification) => (
+
this.handleNotificationClick(notification)}
+ style={{
+ padding: "8px",
+ cursor: "pointer",
+ }}
+ >
+ {notification.message}
+
+ ))}
+
+ )}
+
+ {selectedNotification && (
+
+ {selectedNotification.message}
+
+ )}
+