Admin page work

app/Admin/Overview/page.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
 import RoundedContainer from "@/components/ui/RoundedContainer";
 import { getServices } from "@/lib/api/helpers/services";
 import { Project, Service, User } from "@/lib/api/types";
@@ -8,7 +9,7 @@ import { getUsers } from "@/lib/api/helpers/users";
 
 export default function Overview() {
   const [projectStatus, setProjectStatus] = useState<boolean>(true);
-  const [projects, setProjects] = useState<Project[]>();
+  const [projects, setProjects] = useState<Project[]>([]);
   /*useEffect(() => {
     getProjects()
       .then((projects) => {
@@ -21,7 +22,7 @@ export default function Overview() {
       });
   }, []); IMPLEMENT GET PROJECTS */
   const [serviceStatus, setServiceStatus] = useState<boolean>(true);
-  const [services, setServices] = useState<Service[]>();
+  const [services, setServices] = useState<Service[]>([]);
   useEffect(() => {
     getServices()
       .then((services) => {
@@ -34,7 +35,7 @@ export default function Overview() {
       });
   }, []);
   const [userStatus, setUserStatus] = useState<boolean>(true);
-  const [users, setUsers] = useState<User[]>();
+  const [users, setUsers] = useState<User[]>([]);
   useEffect(() => {
     getUsers()
       .then((users) => {
@@ -50,12 +51,33 @@ export default function Overview() {
     <div>
       <RoundedContainer>
         <p>Users</p>
+        {users.length < 1 ? (
+          users.map((user) => <p key={user.id}>{user.username}</p>)
+        ) : userStatus.valueOf() ? (
+          <p>Loading users...</p>
+        ) : (
+          <p>Failed to load users :C</p>
+        )}
       </RoundedContainer>
       <RoundedContainer>
         <p>Services</p>
+        {services.length < 1 ? (
+          services.map((service) => <p key={service.id}>{service.title}</p>)
+        ) : serviceStatus ? (
+          <p>Loading services...</p>
+        ) : (
+          <p>Failed to load services :C</p>
+        )}
       </RoundedContainer>
       <RoundedContainer>
         <p>Projects</p>
+        {projects.length < 1 ? (
+          projects.map((project) => <p key={project.id}>{project.title}</p>)
+        ) : projectStatus ? (
+          <p>Loading projects...</p>
+        ) : (
+          <p>Failed to load projects :C</p>
+        )}
       </RoundedContainer>
     </div>
   );