Added initial widgets in dashboard

src/Components/API/API.tsx

@@ -2,9 +2,11 @@
 import axios from "axios";
 import {
   ActivationType,
+  EquipmentListType,
   LoginType,
   RegisterType,
   ResetPasswordConfirmType,
+  EquipmentInstanceListType,
 } from "../Types/Types";
 
 const instance = axios.create({
@@ -106,6 +108,7 @@ export async function JWTRefreshAPI() {
       return true;
     })
     .catch(() => {
+      console.log("Error refreshing token");
       return false;
     });
 }
@@ -119,7 +122,6 @@ export async function UserAPI() {
     })
     .catch(() => {
       console.log("Error retrieving user data");
-      return false;
     });
 }
 
@@ -128,11 +130,9 @@ export function ActivationAPI(activation: ActivationType) {
     .post("api/v1/accounts/users/activation/", activation)
     .then(() => {
       console.log("Activation Success");
-      return true;
     })
     .catch(() => {
       console.log("Activation failed");
-      return false;
     });
 }
 export function ResetPasswordAPI(email: string) {
@@ -140,11 +140,9 @@ export function ResetPasswordAPI(email: string) {
     .post("api/v1/accounts/users/reset_password/", { email: email })
     .then(() => {
       console.log("Activation Success");
-      return true;
     })
     .catch(() => {
       console.log("Activation failed");
-      return false;
     });
 }
 
@@ -153,10 +151,34 @@ export function ResetPasswordConfirmAPI(info: ResetPasswordConfirmType) {
     .post("api/v1/accounts/users/reset_password_confirm/", info)
     .then(() => {
       console.log("Reset Success");
-      return true;
     })
     .catch(() => {
       console.log("Reset failed");
-      return false;
+    });
+}
+
+// Equipment APIs
+
+export async function EquipmentsAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/equipments/equipments/", config)
+    .then((response) => {
+      return response.data as EquipmentListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving equipments");
+    });
+}
+
+export async function EquipmentInstancesAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/equipments/equipment_instances/", config)
+    .then((response) => {
+      return response.data as EquipmentInstanceListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving equipments");
     });
 }

src/Components/Header/Header.tsx

@@ -38,7 +38,7 @@ export default function Header(props: props) {
           }}
         />
       </div>
-      <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
+      <p style={{ ...styles.text_light, ...styles.text_L, ...{ flex: 1 } }}>
         {props.label}
       </p>
       <div style={{ flex: 1 }} />

src/Components/Types/Types.tsx

@@ -26,3 +26,26 @@ export type AddEquipmentType = {
   name: string;
   remarks: string;
 };
+
+export type EquipmentType = {
+  id: number;
+  name: string;
+  description: string;
+  last_updated: string;
+  last_updated_by: string;
+  date_added: string;
+};
+
+export type EquipmentListType = Array<EquipmentType>;
+
+export type EquipmentInstanceType = {
+  id: number;
+  equipment: string;
+  status: string;
+  remarks: string;
+  last_updated: string;
+  last_updated_by: string;
+  date_added: string;
+};
+
+export type EquipmentInstanceListType = Array<EquipmentInstanceType>;

src/Pages/DashboardPage/DashboardPage.tsx

@@ -1,11 +1,191 @@
 import Header from "../../Components/Header/Header";
 import styles from "../../styles";
+import { useQueries } from "@tanstack/react-query";
+import { EquipmentsAPI, EquipmentInstancesAPI } from "../../Components/API/API";
+import { CircularProgress } from "@mui/material";
 
 export default function Dashboard() {
+  const queries = useQueries({
+    queries: [
+      {
+        queryKey: ["equipments"],
+        queryFn: EquipmentsAPI,
+      },
+      {
+        queryKey: ["equipment_instances"],
+        queryFn: EquipmentInstancesAPI,
+      },
+    ],
+  });
+  const isLoading = queries.some((result) => result.isLoading);
+  if (isLoading) {
+    return (
+      <div style={styles.background}>
+        <Header label={"Dashboard"} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingTop: "64px",
+            },
+          }}
+        >
+          <CircularProgress style={{ height: "128px", width: "128px" }} />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_L,
+            }}
+          >
+            Loading
+          </p>
+        </div>
+      </div>
+    );
+  }
   return (
     <div style={styles.background}>
       <Header label={"Dashboard"} />
-      <p style={{ ...styles.text_dark, ...styles.text_M }}>Dashboard Page</p>
+      <div style={styles.flex_column}>
+        <div style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
+          <div
+            style={{
+              paddingLeft: "16px",
+              paddingRight: "16px",
+              margin: "16px",
+              borderRadius: 16,
+              backgroundColor: "#a6a6a6",
+              alignSelf: "center",
+              justifyContent: "center",
+              width: "512px",
+            }}
+          >
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_M,
+                ...{ float: "left", position: "absolute" },
+              }}
+            >
+              Item Types in System
+            </p>
+
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_L,
+              }}
+            >
+              {queries[0].data ? queries[0].data.length : 0}
+            </p>
+          </div>
+          <div
+            style={{
+              paddingLeft: "16px",
+              paddingRight: "16px",
+              margin: "16px",
+              borderRadius: 16,
+              backgroundColor: "#a6a6a6",
+              alignSelf: "center",
+              justifyContent: "center",
+              width: "512px",
+            }}
+          >
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_M,
+                ...{ float: "left", position: "absolute" },
+              }}
+            >
+              Unique Items in System
+            </p>
+
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_L,
+              }}
+            >
+              {queries[1].data ? queries[1].data.length : 0}
+            </p>
+          </div>
+        </div>
+        <div style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
+          <div
+            style={{
+              paddingLeft: "16px",
+              paddingRight: "16px",
+              margin: "16px",
+              borderRadius: 16,
+              backgroundColor: "#a6a6a6",
+              alignSelf: "center",
+              justifyContent: "center",
+              width: "512px",
+            }}
+          >
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_M,
+                ...{ float: "left", position: "absolute" },
+              }}
+            >
+              Working Items
+            </p>
+
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_L,
+              }}
+            >
+              {queries[1].data
+                ? queries[1].data.filter(
+                    (equipment) => equipment.status == "Working"
+                  ).length
+                : 0}
+            </p>
+          </div>
+          <div
+            style={{
+              paddingLeft: "16px",
+              paddingRight: "16px",
+              margin: "16px",
+              borderRadius: 16,
+              backgroundColor: "#a6a6a6",
+              alignSelf: "center",
+              justifyContent: "center",
+              width: "512px",
+            }}
+          >
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_M,
+                ...{ float: "left", position: "absolute" },
+              }}
+            >
+              Broken Items
+            </p>
+
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_L,
+              }}
+            >
+              {queries[1].data
+                ? queries[1].data.filter(
+                    (equipment) => equipment.status == "Broken"
+                  ).length
+                : 0}
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

src/Pages/LandingPage/LandingPage.tsx

@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { RootState } from "../../Components/Plugins/Redux/Store/Store";
 import ResetPasswordModal from "../../Components/ResetPasswordModal/ResetPasswordModal";
+
 export default function LandingPage() {
   const [loginmodalOpen, SetloginmodalOpen] = useState(false);
   const [registermodalOpen, SetRegisterModalOpen] = useState(false);