Make data dynamic in workflow view. Add requester and startDate to workflows.

src/components/ApprovalWorkflows/StartedOn.tsx

@@ -2,19 +2,39 @@ import React from "react";
 import { PiCalendarDots } from "react-icons/pi";
 
 interface Props {
-    date: string;
+    date: number;
 }
 
 export default function StartedOn({ date }: Props) {
+    const formattedDate = new Date(date);
+
+    const yearMonthDay = formattedDate.toISOString().split("T")[0];
+
+    const fullDateTime = formattedDate.toLocaleString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+
     return (
         <div className="flex items-center space-x-3">
             <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
-                <PiCalendarDots className="text-mti-purple-dark size-7"/>
+                <PiCalendarDots className="text-mti-purple-dark size-7" />
             </div>
             <div>
                 <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
                 <div className="flex items-center">
-                    <p className="text-xs font-medium text-gray-800">{date}</p>
+                    {/* Display the formatted date and add a title attribute for hover */}
+                    <p
+                        className="text-xs font-medium text-gray-800"
+                        title={fullDateTime} // Shows full date and time on hover
+                    >
+                        {yearMonthDay}
+                    </p>
                 </div>
             </div>
         </div>