bunch of improvements and making scheduled only with specific time

components/Dashboard/Header.tsx

@@ -35,6 +35,8 @@ import UserStatusBubble from "../UserStatusBubble";
 
 const teamService = new TeamService();
 
+const today = new Date();
+
 export default function Header() {
   const { currUser, logOut } = useAuth();
   const { team, user, userTeamMember } = useTeamDashboardContext();
@@ -278,7 +280,6 @@ export default function Header() {
     );
   }
 
-  const today = new Date();
   const periodOfDay = generateGreetings();
 
   return (

components/Dashboard/Rooms.tsx

@@ -25,6 +25,7 @@ import { Divider, Dropdown, Menu, Radio, Tooltip } from "antd";
 import RoomCard from "../RoomCard";
 import toast from "react-hot-toast";
 import RoomTypeTag from "../RoomTypeTag";
+import moment from "moment";
 
 enum RoomTypeFilter {
   team = "team",
@@ -41,6 +42,7 @@ enum RoomTimeFilter {
 
 const db = getFirestore();
 
+const today = new Date();
 const lastWeek = new Date();
 lastWeek.setDate(lastWeek.getDate() - 7);
 const nextWeek = new Date();
@@ -74,7 +76,7 @@ export default function DashboardRoom() {
     });
   }, []);
 
-  // get scheduled rooms data realtime
+  // get scheduled rooms data realtime: the ones with the date range
   useEffect(() => {
     /**
      * QUERY:
@@ -209,10 +211,6 @@ export default function DashboardRoom() {
                 roomType={RoomType.scheduled}
               />
             </span>
-            <span className="text-gray-200">
-              Your next room is in{" "}
-              <span className="text-orange-500">20 minutes</span>
-            </span>
             <div className="flex flex-row overflow-x-auto">
               {scheduled.map((room) => (
                 <RoomCard

components/Modals/CreateOrUpdateRoom.tsx

@@ -100,18 +100,14 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
         newRoom.status = RoomStatus.live;
       } else if (roomType == RoomType.scheduled) {
         // make sure that either appx or time picker is selected, not both
-        if (roomAppxDateTime && dateTimePicker) {
-          toast.error(
-            "Please only select an approximate slot or specific time, not both!"
-          );
+        if (!dateTimePicker) {
+          toast.error("Please select a date and time!");
           return;
-        } else if (roomAppxDateTime) {
-          newRoom.approximateDateTime = roomAppxDateTime;
-        } else {
-          newRoom.scheduledDateTime = Timestamp.fromDate(
-            dateTimePicker.toDate()
-          );
         }
+
+        newRoom.approximateDateTime = null;
+
+        newRoom.scheduledDateTime = Timestamp.fromDate(dateTimePicker.toDate());
       } else if (roomType == RoomType.recurring) {
         // clear the field for the time picker if they ever selected that
         newRoom.scheduledDateTime = null;
@@ -119,8 +115,6 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
         newRoom.approximateDateTime = roomAppxDateTime;
       }
 
-      // newRoom.approximateDateTime = roomAppxDateTime;
-
       newRoom.link = roomLink;
       newRoom.members = [...membersSelected]; // add currUser to the list of "people"
       newRoom.type = roomType;
@@ -287,31 +281,32 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
             </Radio.Button>
           </Radio.Group>
 
-          {roomType == RoomType.recurring || roomType == RoomType.scheduled ? (
-            <div className="flex flex-row items-center">
-              <Tooltip
-                title={`Put things like "ping me when ready" or "sometime this afternoon"`}
-              >
-                <span className="flex flex-col items-stretch flex-1 mt-4">
-                  <span className="text-md">Approximate Slot</span>
-                  <span className="text-gray-300 text-xs mb-2 flex-1">
-                    Sometimes you don&#39;t have a specific time or want to
-                    propose a rough period.
-                  </span>
-                  <input
-                    placeholder="ex. 2pm-ish...after lunch...every evening"
-                    className="w-full rounded-lg bg-gray-50 p-3"
-                    value={roomAppxDateTime}
-                    onChange={(e) => setRoomAppxDateTime(e.target.value)}
-                  />
+          {roomType == RoomType.recurring ? (
+            <Tooltip
+              title={`Put things like "ping me when ready" or "sometime this afternoon"`}
+            >
+              <span className="flex flex-col items-stretch flex-1 mt-4">
+                <span className="text-md">Approximate Slot</span>
+                <span className="text-gray-300 text-xs mb-2 flex-1">
+                  Sometimes you don&#39;t have a specific time or want to
+                  propose a rough period.
                 </span>
-              </Tooltip>
-              {roomType == RoomType.scheduled ? (
-                <>
-                  <span className="text-orange-500 mx-5 font-bold">OR</span>
-                  <span className="flex flex-col items-start flex-1 mt-4">
-                    <span className="text-md">Specific Time</span>
-                    {/* <TimePicker
+                <input
+                  placeholder="ex. 2pm-ish...after lunch...every evening"
+                  className="w-full rounded-lg bg-gray-50 p-3"
+                  value={roomAppxDateTime}
+                  onChange={(e) => setRoomAppxDateTime(e.target.value)}
+                />
+              </span>
+            </Tooltip>
+          ) : (
+            <></>
+          )}
+
+          {roomType == RoomType.scheduled ? (
+            <span className="flex flex-col items-start flex-1 mt-4">
+              <span className="text-md">Specific Time</span>
+              {/* <TimePicker
                       minuteStep={15}
                       use12Hours
                       format="h:mm a"
@@ -320,22 +315,17 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
                       onChange={handleTimePickerChange}
                     /> */}
 
-                    <DatePicker
-                      minuteStep={15}
-                      use12Hours
-                      format="YYYY-MM-DD h:mm a"
-                      showTime={{
-                        defaultValue: moment("10:00:00", "h:mm a"),
-                      }}
-                      value={dateTimePicker}
-                      onChange={handleDateTimePickerChange}
-                    />
-                  </span>
-                </>
-              ) : (
-                <></>
-              )}
-            </div>
+              <DatePicker
+                minuteStep={15}
+                use12Hours
+                format="YYYY-MM-DD h:mm a"
+                showTime={{
+                  defaultValue: moment("10:00:00", "h:mm a"),
+                }}
+                value={dateTimePicker}
+                onChange={handleDateTimePickerChange}
+              />
+            </span>
           ) : (
             <></>
           )}

components/RoomCard.tsx

@@ -1,7 +1,7 @@
 import { BsThreeDots } from "react-icons/bs";
-import { FaBell, FaClock, FaLink, FaPlus } from "react-icons/fa";
+import { FaBell, FaCalendarDay, FaClock, FaLink, FaPlus } from "react-icons/fa";
 import { IoTimer } from "react-icons/io5";
-import Room, { RoomStatus } from "../models/room";
+import Room, { RoomStatus, RoomType } from "../models/room";
 import RoomTypeTag from "./RoomTypeTag";
 import Image from "next/image";
 import { useAuth } from "../contexts/authContext";
@@ -15,6 +15,8 @@ import { useState } from "react";
 import SkeletonLoader from "./Loading/skeletonLoader";
 import { useKeyboardContext } from "../contexts/keyboardContext";
 import UserService from "../services/userService";
+import Moment from "react-moment";
+import moment from "moment";
 
 interface IRoomCardProps {
   room: Room;
@@ -221,20 +223,43 @@ export default function RoomCard(props: IRoomCardProps) {
     </div>
   );
 
+  var dateTimeScheduled = null;
+  if (props.room.type == RoomType.scheduled) {
+    dateTimeScheduled = props.room.scheduledDateTime.toDate();
+  }
+
+  function renderTopRightCardInfo() {
+    if (props.room.type == RoomType.scheduled && props.room.scheduledDateTime) {
+      return (
+        <>
+          <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+            <FaCalendarDay />
+            <Moment date={dateTimeScheduled} format="ddd" />
+          </span>
+
+          <span className="text-emerald-700 bg-emerald-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
+            <FaClock />
+            <Moment date={dateTimeScheduled} format="h:mm a" />
+          </span>
+        </>
+      );
+    }
+  }
+
   return (
     <span
       className={`flex flex-col ${
         isUserInRoom ? " bg-white bg-opacity-80" : "bg-gray-300 bg-opacity-25"
-      }  rounded-lg justify-between w-96 max-w-screen-sm m-2 shrink-0 h-[12rem]`}
+      }  rounded-lg justify-between w-96 m-2 shrink-0 h-[12rem]`}
     >
       {/* header */}
-      <span className="flex flex-row justify-between items-baseline space-x-1 p-5 h-full">
+      <span className="flex flex-row justify-between items-start space-x-1 p-5 h-full">
         {/* meeting details */}
-        <span className="flex flex-col items-baseline justify-start max-w-xs pr-20 h-full">
+        <span className="flex flex-col items-baseline justify-start max-w-xs h-full">
           <span
             className={`${
               isUserInRoom ? " text-gray-500" : "text-white"
-            } font-semibold mr-auto`}
+            } font-semibold`}
           >
             {props.room.name}
           </span>
@@ -260,11 +285,9 @@ export default function RoomCard(props: IRoomCardProps) {
         </span>
 
         {/* room status and link(s) */}
-        <span className="flex flex-col items-end justify-between h-full">
-          <RoomTypeTag
-            roomType={props.room.type}
-            roomStatus={props.room.status}
-          />
+        <span className="flex flex-col items-end justify-between h-full w-fit">
+          {renderTopRightCardInfo()}
+
           <span
             className={`${
               isUserInRoom ? "text-gray-400" : "text-gray-200"