manageUtilities frontend created with api calls

src/App.js

@@ -34,6 +34,9 @@ import { verifyLoginToken } from "./api/verify";
 import AdminHomeButton from "./components/adminHomeButton";
 import EventUtility from "./screens/eventUtility";
 import EventUtilityList from "./screens/eventUtilityList";
+import AdminUtilityHomePage from "./screens/adminUtilityHomePage";
+import UtilityRequests from "./screens/utilityRequests";
+import ManageUtilities from "./screens/manageUtilities";
 
 const NoMatchPage = () => {
   return <h3>404 - Not found</h3>;
@@ -101,6 +104,15 @@ class App extends Component {
               <Route exact path="/login">
                 <Redirect to="/" />
               </Route>
+              <Route exact path="/utilitypage">
+                <AdminUtilityHomePage />
+              </Route>
+              <Route exact path="/utilityrequests">
+                <UtilityRequests />
+              </Route>
+              <Route exact path="/manageutilities">
+                <ManageUtilities />
+              </Route>
               <Route exact path="/complaintoptions">
                 <AdminHostelComplaintOptions />
               </Route>

src/api/utility.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { baseURL } from "../baseUrl";
+
+export const getUtilityApi = async () => {
+  try {
+    const response = await axios.get(`${baseURL}/utility/all`);
+    return response;
+  } catch (error) {
+    return error;
+  }
+};
+
+export const addUtilityApi = async (name, quantity) => {
+  try {
+    const response = await axios.post(`${baseURL}/utility/new`, {
+      name: name,
+      quantity: quantity,
+    });
+    return response;
+  } catch (error) {
+    return error;
+  }
+};
+
+export const deleteUtilityApi = async (utilityId) => {
+  try {
+    const response = await axios.delete(`${baseURL}/utility/${utilityId}`);
+    return response;
+  } catch (error) {
+    return error;
+  }
+};

src/components/adminHomeButton.js

@@ -11,7 +11,7 @@ class AdminHomeButton extends Component {
       " Utilities Booking",
       "Check Hostel Complaints",
     ];
-    const path = ["/conferencepage", "/", "/", "/complaintoptions"];
+    const path = ["/conferencepage", "/", "/utilitypage", "/complaintoptions"];
     const svgs = [
       <svg
         xmlns="http://www.w3.org/2000/svg"

src/components/manageUtilityCard.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Row, Col } from "antd";
+import { DeleteTwoTone } from "@ant-design/icons";
+
+import { deleteUtilityApi } from "../api/utility";
+
+import "./styles/manageRoomCard.css";
+
+class ManageUtilityCard extends React.Component {
+  deleteUtility = async () => {
+    const response = await deleteUtilityApi(this.props.utility._id);
+    this.props.updateUtilityData();
+  };
+  render() {
+    return (
+      <Row style={{ backgroundColor: "#F8F8F8", margin: "10px 0" }}>
+        <Col xl={2} lg={2} md={1} sm={2} xs={2} />
+        <Col
+          className="manage-room-card-col"
+          span={6}
+        >
+          <p className="manage-room-card-text">{this.props.utility.name}</p>
+        </Col>
+        <Col
+          className="manage-room-card-col"
+          span={6}
+        >
+          <p className="manage-room-card-text">{this.props.utility.capacity}</p>
+        </Col>
+        <Col
+          className="manage-room-card-col"
+          span={6}
+        >
+          <DeleteTwoTone
+            onClick={this.deleteUtility}
+            style={{ fontSize: "15px" }}
+            twoToneColor="#eb2f96"
+          />
+        </Col>
+        <Col xl={2} lg={2} md={1} sm={2} xs={2} />
+      </Row>
+    );
+  }
+}
+
+export default ManageUtilityCard;

src/screens/adminUtilityHomePage.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import Footers from "../components/footer";
+import FooterIcon from "../components/footerIcons";
+import AdminConferenceOptionCard from "../components/adminConferenceOptionCard";
+import AdminNavbar from "../components/adminNavbar";
+import { Row, Col } from "antd";
+
+class AdminUtilityHomePage extends Component {
+  render() {
+    return (
+        <>
+        <AdminNavbar/>
+        <Row style={{paddingTop:"5%",height:"70vh"}}>
+          <Col span={12}>
+            <AdminConferenceOptionCard
+              title="Manage Requests"
+              description= "Approve or Decline Requests sent by the user"
+              path="/utilityrequests"
+            />
+          </Col>
+          <Col span={12}>
+          <AdminConferenceOptionCard
+              title="Manage Utilities"
+              description= "Add or Delete Utilities as per Availability"
+              path="/manageutilities"
+            />
+          </Col>
+        </Row>
+        <FooterIcon />
+        <Footers />
+      </>
+    );
+  }
+}
+
+export default AdminUtilityHomePage;

src/screens/manageUtilities.js

@@ -0,0 +1,168 @@
+import React, { Component } from "react";
+import { Row, Col, Button, Drawer, Input, InputNumber, message } from "antd";
+import { addUtilityApi, getUtilityApi } from "../api/utility";
+import AdminNavbar from "../components/adminNavbar";
+import ManageUtilityCard from "../components/manageUtilityCard";
+import "./styles/manageRoom.css";
+
+class ManageUtilities extends Component {
+    constructor() {
+        super();
+        this.state = {
+          isDrawerVisible: false,
+          quantity: "",
+          name: "",
+          loadingButton: false,
+          utilities: [],
+        };
+      }
+      componentDidMount = async () => {
+        if (window.innerWidth <= 720) {
+          this.info();
+        }
+        const response = await getUtilityApi();
+        this.setState({
+          utilities: await response.data.data,
+        });
+      };
+      info = () => {
+        message.info("Best viewed on larger screens.");
+      };
+      onClose = () => {
+        this.setState({
+          isDrawerVisible: false,
+        });
+      };
+      updateUtilityData = async () => {
+        const response = await getUtilityApi();
+        this.setState({
+          utilities: await response.data.data,
+        });
+      };
+      addUtility = async () => {
+        this.setState({
+          loadingButton: true,
+        });
+        const response = await addUtilityApi(
+          this.state.name,
+          this.state.quantity
+        );
+        if (response.status == 201) {
+          const utilityResponse = await getUtilityApi();
+          this.setState({
+            loadingButton: false,
+            isDrawerVisible: false,
+            utilities: await utilityResponse.data.data,
+          });
+        } else {
+          this.setState({
+            loadingButton: false,
+          });
+        }
+      };
+  render() {
+    return (
+        <>
+        <AdminNavbar/>
+        <h1 style={{ textAlign: "center", margin: "20px" }}>Manage Utilities</h1>
+
+        <Row>
+          <Col
+            style={{
+              display: "flex",
+              alignItems: "right",
+              justifyContent: "flex-end",
+              paddingRight: "2%",
+              marginBottom: "15px",
+            }}
+            span={24}
+          >
+            <Button onClick={() => this.setState({ isDrawerVisible: true })}>
+              Add Utility
+            </Button>
+          </Col>
+        </Row>
+        <Row>
+          <Col xl={2} lg={2} md={1} sm={2} xs={2} />
+          <Col
+            className="manage-room-table-title-col"
+            span={6}
+          >
+            <p className="manage-room-table-title">Item Name</p>
+          </Col>
+          <Col
+            className="manage-room-table-title-col"
+            span={6}
+          >
+            <p className="manage-room-table-title">Quantity</p>
+          </Col>
+          <Col
+            className="manage-room-table-title-col"
+            span={6}
+          >
+            <p className="manage-room-table-title">Actions</p>
+          </Col>
+          <Col xl={2} lg={2} md={1} sm={2} xs={2} />
+          <Col span={24}>
+            {this.state.utilities.map((utility) => {
+              return (
+                <ManageUtilityCard
+                  key={utility._id}
+                  utility={utility}
+                  updateUtilityData={this.updateUtilityData}
+                />
+              );
+            })}
+          </Col>
+        </Row>
+        <Drawer
+          className="manage-room-drawer"
+          title="Add a new utility"
+          height={"50vh"}
+          width={"30vw"}
+          placement={window.screen.width > 526 ? "right" : "bottom"}
+          onClose={this.onClose}
+          visible={this.state.isDrawerVisible}
+          footer={
+            <div
+              style={{
+                textAlign: "right",
+              }}
+            >
+              <Button onClick={this.onClose} style={{ marginRight: 8 }}>
+                Cancel
+              </Button>
+              <Button
+                loading={this.state.loadingButton}
+                onClick={this.addUtility}
+                type="primary"
+              >
+                Add
+              </Button>
+            </div>
+          }
+        >
+          <Row>
+            <h3 style={{color:"white", margin: "3px 2% 2%"}}>Enter Utility Name :</h3>
+            <Input
+              style={{ margin: "0px 2% 2%" }}
+              size="large"
+              placeholder="Enter Utility Name"
+              onChange={(event) => {
+                this.setState({ name: event.target.value });
+              }}
+            />
+            <h3 style={{color:"white", margin: "3px 2% 2%"}}>Enter Quantity :</h3>
+            <InputNumber style={{ margin: "0px 2% 2%" , width:"100%"}} size="large" defaultValue={0}  
+              onChange={(event) => {
+                this.setState({ quantity: event.target.value });
+              }}
+            />
+          </Row>
+        </Drawer>
+      </>
+    );
+  }
+}
+
+export default ManageUtilities;

src/screens/utilityRequests.js

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+import Footers from "../components/footer";
+import FooterIcon from "../components/footerIcons";
+import { Row, Col } from "antd";
+import AdminNavbar from "../components/adminNavbar";
+
+class UtilityRequests extends Component {
+  render() {
+    return (
+        <>
+        <AdminNavbar/>
+        <FooterIcon />
+        <Footers />
+      </>
+    );
+  }
+}
+
+export default UtilityRequests;