change date time format to simpler version

package-lock.json

@@ -14,6 +14,7 @@
         "d3": "^7.8.5",
         "d3-selection": "^3.0.0",
         "firebase": "^9.23.0",
+        "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-flip-numbers": "^3.0.8",
@@ -13564,6 +13565,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28638,6 +28647,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -9,6 +9,7 @@
     "d3": "^7.8.5",
     "d3-selection": "^3.0.0",
     "firebase": "^9.23.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flip-numbers": "^3.0.8",

src/App.css

@@ -301,7 +301,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(207, 235, 250);
+    background-color: rgb(215, 192, 252);
   }
 
   .title-text {
@@ -408,7 +408,7 @@ div.bar {
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: rgb(185, 181, 181);
+  background-color: rgb(207, 235, 250);
   color: black;
   text-align: center;
 }

src/App.js

@@ -1,35 +1,36 @@
 import logo from './logo.png';
 import './App.css';
 import React, { useEffect, useState } from 'react';
+import moment from 'moment';
 
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
 import Card from './components/Card';
 
-// /* dev and test */
-// const firebaseConfig = {
-//   apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
-//   authDomain: "hpos-af3cc.firebaseapp.com",
-//   projectId: "hpos-af3cc",
-//   storageBucket: "hpos-af3cc.appspot.com",
-//   messagingSenderId: "650071678820",
-//   appId: "1:650071678820:web:ce50538bf46632d46c6471",
-//   measurementId: "G-6JHQ47S9DD"
-// };
-
-
-/* prod */
+/* dev and test */
 const firebaseConfig = {
-  apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
-  authDomain: "hpos-prod.firebaseapp.com",
-  projectId: "hpos-prod",
-  storageBucket: "hpos-prod.appspot.com",
-  messagingSenderId: "1012719870714",
-  appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
-  measurementId: "G-B0NZ7DEF69"
+  apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
+  authDomain: "hpos-af3cc.firebaseapp.com",
+  projectId: "hpos-af3cc",
+  storageBucket: "hpos-af3cc.appspot.com",
+  messagingSenderId: "650071678820",
+  appId: "1:650071678820:web:ce50538bf46632d46c6471",
+  measurementId: "G-6JHQ47S9DD"
 };
 
+
+// /* prod */
+// const firebaseConfig = {
+//   apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
+//   authDomain: "hpos-prod.firebaseapp.com",
+//   projectId: "hpos-prod",
+//   storageBucket: "hpos-prod.appspot.com",
+//   messagingSenderId: "1012719870714",
+//   appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
+//   measurementId: "G-B0NZ7DEF69"
+// };
+
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
 
@@ -45,7 +46,7 @@ function App() {
   const [positives, setPositives] = useState(0);
   const [traits, setTraits] = useState(0);
   const [diseases, setDiseases] = useState(0);
-  const [lastUpdate, setLastUpdate] = useState(Date.now());
+  const [lastUpdate, setLastUpdate] = useState('');
 
   useEffect(() => {
 
@@ -69,7 +70,7 @@ function App() {
       setTotalScreened(patients.length);
       setMales(maleCount);
       setFemales(femaleCount);
-      setLastUpdate(Date.now());
+      setLastUpdate(moment());
     });
   }, []);
 
@@ -99,7 +100,7 @@ function App() {
       setPositives(traitCount + diseaseCount);
       setTraits(traitCount);
       setDiseases(diseaseCount);
-      setLastUpdate(Date.now());
+      setLastUpdate(moment());
     });
   }, []);
 
@@ -142,7 +143,7 @@ function App() {
 
       <div className='footer'>
           <div className='last-update'>
-            Updated At: {Date(lastUpdate).toLocaleString()}
+            Updated at: {moment(lastUpdate).format("DD-MM-YYYY HH:mm:ss a")}
           </div>
 
           <div className='developer'>