From 4c5c2a02b6e6750e241215f71732dc620aa059d2 Mon Sep 17 00:00:00 2001
From: Giorgio <tran.giorgio@gmail.com>
Date: Thu, 16 Nov 2023 18:28:37 -1000
Subject: [PATCH] Implement 'new' indicator

---
 .../events-dashboard/DashboardTable.jsx       | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/my-app/src/components/events/events-dashboard/DashboardTable.jsx b/my-app/src/components/events/events-dashboard/DashboardTable.jsx
index c157d05..df4d531 100644
--- a/my-app/src/components/events/events-dashboard/DashboardTable.jsx
+++ b/my-app/src/components/events/events-dashboard/DashboardTable.jsx
@@ -178,7 +178,16 @@ const DashboardTable = ({ events, isLoading }) => {
           </div>
         ) : filteredEvents.length ? (
           filteredEvents.map((event) => (
-            <div key={event._id} className="card card-bordered border-neutral bg-base-100">
+            <div
+              key={event._id}
+              className="card card-bordered border-neutral bg-base-100 w-full"
+            >
+              {/* if date less than 10 minutes show */}
+              {new Date(Date.now()) - new Date(event.reportedDate) < 600000 && (
+                <div className="badge badge-primary self-end -my-2 -mx-2">
+                  new
+                </div>
+              )}
               <div className="card-body px-8 py-5">
                 <div className="flex justify-between">
                   <div>
@@ -193,7 +202,9 @@ const DashboardTable = ({ events, isLoading }) => {
                         <ArrowTopRightOnSquareIcon className="w-4 h-4 md:w-6 md:h-6 ml-2 pt-1" />
                       </div>
                       <div className="text-sm md:text-md">
-                        <time className="my-3">{prettyHstDateTime(event.reportedDate)}</time>
+                        <time className="my-3">
+                          {prettyHstDateTime(event.reportedDate)}
+                        </time>
                         <div className="pt-2">
                           <div>
                             <span className="font-semibold">Description:</span>{" "}
@@ -204,7 +215,9 @@ const DashboardTable = ({ events, isLoading }) => {
                             {removalOrgName(event.removalOrgId)}
                           </div>
                           <div>
-                            <span className="font-semibold">Current Location:</span>{" "}
+                            <span className="font-semibold">
+                              Current Location:
+                            </span>{" "}
                             {event.tempStorage}
                           </div>
                         </div>
@@ -215,7 +228,8 @@ const DashboardTable = ({ events, isLoading }) => {
                       className="cursor-pointer hover:opacity-70 transition-all text-gray-700 flex mt-2 text-sm"
                     >
                       <ChatBubbleLeftRightIcon className="w-6 h-6 me-1" />
-                      {event.threadCount} message{event.threadCount === 1 ? "" : "s"}
+                      {event.threadCount} message
+                      {event.threadCount === 1 ? "" : "s"}
                     </Link>
                   </div>
                   <div className="ms-auto flex flex-1 flex-col justify-between">