fixing dashboard layout and other things starting to implement rooms and all

components/Dashboard/Office.tsx

@@ -81,7 +81,7 @@ export default function Office() {
   // if there are none, then show user button to create initial office rooms and then create them
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1">
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="text-white uppercase">Office</span>
@@ -89,7 +89,7 @@ export default function Office() {
       </span>
 
       {/* all office rooms  */}
-      <span className="flex flex-col space-y-5">
+      <span className="flex flex-col space-y-5 overflow-auto">
         {allOfficeRooms.map((officeRoom) => (
           <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
         ))}

components/Dashboard/Rooms.tsx

@@ -362,7 +362,7 @@ export default function DashboardRoom() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md h-[46rem] ">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1">
       {/*  modal for creating room */}
       <CreateOrUpdateRoom
         show={showModalType == ShowModalType.createRoom}

components/Dashboard/TeamVoiceLine.tsx

@@ -204,7 +204,7 @@ export default function TeamVoiceLine() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 max-h-[32rem]">
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="text-white">TEAM</span>

components/OfficeCard.tsx

@@ -1,30 +1,49 @@
 import { Avatar } from "antd";
+import { useAuth } from "../contexts/authContext";
+import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
 import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
+import { User } from "../models/user";
 
 interface IOfficeCard {
   officeRoom: OfficeRoom;
 }
 
 export default function OfficeCard(props: IOfficeCard) {
+  const { currUser } = useAuth();
+  const { teamUsersMap, user } = useTeamDashboardContext();
+
+  var allMembersInRoom = props.officeRoom.members?.reduce((results, userId) => {
+    if (userId in teamUsersMap) {
+      results.push(teamUsersMap[userId]);
+    }
+
+    if (userId == currUser.uid) {
+      results.push(user);
+    }
+
+    return results;
+  }, [] as User[]);
+
   return (
     <span className="flex flex-col">
       <span className="flex flex-row justify-start items-center">
-        {renderOfficePulse(OfficeRoomState.active)}
+        {renderOfficePulse(props.officeRoom.state)}
 
         {/* office location name */}
-        <span className="text-gray-200 text-lg font-semibold ml-2">
+        <span className="text-gray-200 text-md font-semibold ml-2">
           {props.officeRoom.name}
         </span>
 
         {/* all members in room */}
         <span className="ml-auto">
           <Avatar.Group>
-            {props.officeRoom.members.map((officeLocation) => {
+            {allMembersInRoom.map((member) => {
               <Avatar
+                src={member.avatarUrl}
                 style={{ backgroundColor: "teal", verticalAlign: "middle" }}
                 className="shadow-xl hover:z-20 hover:cursor-pointer"
               >
-                {officeLocation[0]}
+                {member.nickName[0]}
               </Avatar>;
             })}
           </Avatar.Group>
@@ -35,7 +54,18 @@ export default function OfficeCard(props: IOfficeCard) {
 }
 
 function renderOfficePulse(officeRoomState: OfficeRoomState) {
-  return (
-    <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
-  );
+  switch (officeRoomState) {
+    case OfficeRoomState.active:
+      return (
+        <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
+      );
+    case OfficeRoomState.idle:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+    default:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+  }
 }

pages/teams/[teamid].tsx

@@ -85,14 +85,14 @@ function TeamDashboard() {
     <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
       <Header />
 
-      <div className="flex flex-row items-baseline space-x-5 space-y-5">
-        <div className="flex flex-col max-w-sm space-y-5">
+      <div className="flex flex-row items-start space-x-5 h-[56rem]">
+        <div className="flex flex-col max-w-sm space-y-5 h-full">
           <TeamVoiceLine />
 
           <Office />
         </div>
 
-        <div className="flex flex-col space-y-5 flex-1 overflow-auto">
+        <div className="flex flex-col space-y-5 flex-1 h-full">
           <Announcements />
 
           <Rooms />