diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 030fff5..c3a497e 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -1,5 +1,6 @@
import Meeting from "./Meeting";
import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import List from "@mui/material/List";
import { useState, useEffect } from "react";
import { useAppSelector } from "../../redux/hooks";
@@ -8,7 +9,36 @@ import { selectUsers } from "../../redux/slices/usersSlice";
import { formatTimeFromDate } from "../../utils";
import UserLite from "../../api-bodies/UserLite";
-const MeetingsPanel: React.FC = () => {
+
+const EmptyMeetingsList: React.FC = () => {
+ return (
+
+ {meetings.map((meeting) => {
+ const meetingMembers: UserLite[] = [];
+ participants.forEach((userLite) => {
+ if (
+ userLite != undefined &&
+ meeting.liveParticipantIds.includes(userLite.uuid)
+ ) {
+ meetingMembers.push(userLite);
+ }
+ });
+ const startDate = new Date(meeting.startTime);
+ const startDatemil = startDate.getTime();
+ const endDatemil = startDatemil + meeting.duration * 60000;
+ const endDate = new Date(endDatemil);
+
+ const currentDatemil = currentDate.getTime();
+
+ const meetingMembersString = () => {
+ if (meetingMembers.length > 3) {
+ return (
+ "Participants: " +
+ meetingMembers[0].name +
+ ", " +
+ meetingMembers[1].name +
+ ", " +
+ meetingMembers[2].name +
+ ", and " +
+ (meetingMembers.length - 3).toString() +
+ " more..."
+ );
+ } else {
+ return (
+ "Participants: " +
+ meetingMembers.map((userLite) => " " + userLite.name).toString()
+ );
+ }
+ };
+ console.log(meetingMembersString);
+ if ((currentDatemil >= startDatemil && currentDatemil <= endDatemil) || meeting.liveParticipantIds.length > 0) {
+ const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
+ i += 1;
+ return (
+
+ {i === 1 ?