Status page is done

client/src/components/queryMainCard.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./styles/queryCard.css";
+
+function QueryMainCard(props) {
+  return (
+    <div className="queryMainCard">
+      <div className="queryCard">
+        <p>Complaint No.</p>
+        <p className="make-bold">{props.numberText}</p>
+      </div>
+
+      <div className="queryCardLarge">
+        <p>Complain</p>
+        <p className="make-bold">{props.complainText}</p>
+      </div>
+
+      <div className="queryCard">
+        <p>Status</p>
+        <p className={`make-bold ${props.statusText}`}>{props.statusText}</p>
+      </div>
+    </div>
+  );
+}
+
+export default QueryMainCard;

client/src/components/status.js

@@ -1,7 +1,26 @@
 import React from "react";
+import QueryMainCard from "./queryMainCard";
 
-function Status(){
-  return <div></div>
+//this dummy 'dataList' will come from backend having data like below which will be further used to build <QueryMainCard>
+const dataList = [
+  { number: "#935680", complain: "Fan not Working", status: "Pending" },
+  { number: "#236800", complain: "Water Leakage", status: "Resolved" },
+  { number: "#935676", complain: "Faulty Lift", status: "Rejected" },
+];
+
+function Status() {
+  return (
+    <div>
+      {dataList.map((data) => (
+        <QueryMainCard
+          key = {data.number}
+          numberText={data.number}
+          complainText={data.complain}
+          statusText={data.status}
+        ></QueryMainCard>
+      ))}
+      </div>
+  );
 }
 
 export default Status;

client/src/components/styles/admStatus.css

@@ -1,7 +1,7 @@
 
 /* due to this our navbar have some problems*/
 
-*{
+/* *{
     margin: auto;
     padding: 0;
 }
@@ -88,4 +88,4 @@
     background-color:yellow;
     width: 6rem;
     margin-bottom: 3%;
-}
+} */

client/src/components/styles/navbar.css

@@ -37,7 +37,7 @@
   background-color: lightblue;
   height:8vh;
   width:13vw;
-  display: flex;
+  display:flex;
   justify-content: center;
   align-items: flex-end;
 } 
@@ -59,6 +59,10 @@
   border-radius: 50%;
 }
 
+.nav-link{
+  padding:0 !important;
+}
+
 .dropDownMenu{
   width:10vw;
   text-align: center !important;
@@ -76,6 +80,7 @@
 
 @media screen and (max-width:991px) {
   .navbar li img{
+    margin-top: 1rem;
     width:auto;
     max-height:13vw;
   }
@@ -85,6 +90,7 @@
     padding-left: 1rem;
     width:80vw;
     height:6vh;
+
     padding-top:8px;
     justify-content: flex-start;
     align-items: center;

client/src/components/styles/queryCard.css

@@ -0,0 +1,59 @@
+.queryMainCard{
+    margin: 20px 0;
+    display: flex;
+    justify-content: space-around;
+  }
+
+   .queryCard {
+    height: 150px;
+    width: 25vw;
+    background-color: rgb(218, 236, 247);
+    padding: 20px 10px 10px 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .queryCardLarge {
+    height: 150px;
+    width: 30vw;
+    padding: 20px 10px 10px 10px;
+    background-color: rgb(218, 236, 247);
+    padding-top: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+  }
+
+  p {
+    text-align: center;
+  }
+
+  .make-bold {
+    font-size: 1.3rem;
+    font-weight: 800;
+  }
+
+  .Pending {
+    color: rgb(216, 204, 37);
+  }
+
+  .Resolved {
+    color: rgb(21, 196, 56);
+  }
+
+  .Rejected {
+    color: red;
+  }
+
+  @media screen and (max-width: 991px) {
+    p {
+      font-size: 0.7rem;
+    }
+
+    .make-bold {
+      font-size: 0.9rem;
+    }
+  }