added date time and network status in sidebar (#62) (#534)

added date time and network status in sidebar (#62)

Author: ann-aot

forms-flow-nav/package-lock.json

@@ -45,6 +45,8 @@
   },
   "dependencies": {
     "i18next-browser-languagedetector": "^7.0.1",
+    "lucide-react": "^0.487.0",
+    "moment": "^2.30.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^17.0.2",

forms-flow-nav/package.json

@@ -0,0 +1,61 @@
+import "./Sidebar.scss";
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import { WifiOff, Wifi } from "lucide-react";
+
+const DateTimeNetworkWidget = () => {
+  const [time, setTime] = useState("");
+  const [date, setDate] = useState("");
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+  const [isDaytime, setIsDaytime] = useState(true);
+
+  useEffect(() => {
+    const updateTime = () => {
+      const now = moment();
+      setTime(now.format("HH:mm"));
+      setDate(now.format("dddd, YYYY-MM-DD"));
+
+      const hour = now.hour();
+      setIsDaytime(hour >= 6 && hour < 18); // Sun between 6AM - 6PM
+    };
+
+    const updateNetworkStatus = () => {
+      setIsOnline(navigator.onLine);
+    };
+
+    const intervalId = setInterval(updateTime, 1000);
+    window.addEventListener("online", updateNetworkStatus);
+    window.addEventListener("offline", updateNetworkStatus);
+
+    updateTime();
+    updateNetworkStatus();
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener("online", updateNetworkStatus);
+      window.removeEventListener("offline", updateNetworkStatus);
+    };
+  }, []);
+
+  return (
+    <div className="date-time-network-container">
+      <div className="sun-moon-container">
+        <div className={`sun-moon-icon ${isDaytime ? "sun" : "moon"}`} />
+      </div>
+
+      <div className="time">{time}</div>
+
+      <div className="date">{date}</div>
+
+      <div className="network-icon">
+        {isOnline ? (
+          <Wifi size={25} color="white" />
+        ) : (
+          <WifiOff size={25} color="red" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DateTimeNetworkWidget;

forms-flow-nav/src/sidenav/DateTimeNetworkWidget.jsx

@@ -25,6 +25,7 @@ import MenuComponent from "./MenuComponent";
 import { ApplicationLogo } from "@formsflow/components";
 import { ProfileSettingsModal } from "./ProfileSettingsModal";
 import PropTypes from 'prop-types';
+import DateTimeNetworkWidget from "./DateTimeNetworkWidget"
 
 const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
   const [tenantLogo, setTenantLogo] = React.useState("");
@@ -368,6 +369,9 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
             )}
           </Accordion>
         </div>
+        {(APPLICATION_NAME === "roadsafety") && isAuthenticated && (
+          <DateTimeNetworkWidget/>
+        )}
         {isAuthenticated && (<div className="user-container">
           <button className="button-as-div justify-content-start m-2" onClick={handleProfileModal}>
             <div className="user-icon cursor-pointer" data-testid="user-icon">

forms-flow-nav/src/sidenav/Sidebar.jsx

@@ -1,5 +1,5 @@
-
-.sidenav {  
+@import "../variables.scss";
+.sidenav {
   height: 100%;
   width: 12rem;
   position: fixed;
@@ -236,4 +236,48 @@
   }
 }
 
+.date-time-network-container {
+  color: $white;
+  padding: 20px;
+  position: relative;
+}
+
+.date-time-network-container .sun-moon-container {
+  position: absolute;
+  top: 32px;
+  left: 15px;
+}
+
+.date-time-network-container .sun-moon-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.date-time-network-container .sun {
+  background-color: #facc15;
+}
 
+.date-time-network-container .moon {
+  background-color: #cbd5e0;
+}
+
+.date-time-network-container .time {
+  font-size: 28px;
+  font-weight: bold;
+  margin-left: 40px;
+}
+
+.date-time-network-container .date {
+  font-size: 15px;
+  color: #cbd5e0;
+  margin-left: 10px;
+  margin-top: 4px;
+}
+
+.date-time-network-container .network-icon {
+  position: absolute;
+  top: 23px;
+  right: 20px;
+}