make all the timestamp local time and hovering shows UTC timestamp (#1164)

skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx

@@ -13,7 +13,7 @@ import { ZoomableImage } from "@/components/ZoomableImage";
 import { Skeleton } from "@/components/ui/skeleton";
 import { getImageURL } from "./artifactUtils";
 import { Input } from "@/components/ui/input";
-import { basicTimeFormat } from "@/util/timeFormat";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { Artifact } from "./Artifact";
 
@@ -132,7 +132,11 @@ function StepArtifacts({ id, stepProps }: Props) {
             {isFetching ? (
               <Skeleton className="h-4 w-40" />
             ) : stepProps ? (
-              <Input value={basicTimeFormat(stepProps.created_at)} readOnly />
+              <Input
+                value={basicLocalTimeFormat(stepProps.created_at)}
+                readOnly
+                title={basicTimeFormat(stepProps.created_at)}
+              />
             ) : null}
           </div>
         </div>

skyvern-frontend/src/routes/tasks/detail/StepInfo.tsx

@@ -2,7 +2,7 @@ import { StepApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
-import { basicTimeFormat } from "@/util/timeFormat";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 
 type Props = {
   isFetching: boolean;
@@ -33,7 +33,9 @@ function StepInfo({ isFetching, stepProps }: Props) {
         {isFetching ? (
           <Skeleton className="h-4 w-40" />
         ) : stepProps ? (
-          <span>{basicTimeFormat(stepProps.created_at)}</span>
+          <span title={basicTimeFormat(stepProps.created_at)}>
+            {basicLocalTimeFormat(stepProps.created_at)}
+          </span>
         ) : null}
       </div>
     </div>

skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx

@@ -22,7 +22,7 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { StatusBadge } from "@/components/StatusBadge";
-import { basicTimeFormat } from "@/util/timeFormat";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import { TaskActions } from "./TaskActions";
 
@@ -120,8 +120,9 @@ function TaskHistory() {
                     <TableCell
                       className="w-1/4 cursor-pointer"
                       onClick={(event) => handleNavigate(event, task.task_id)}
+                      title={basicTimeFormat(task.created_at)}
                     >
-                      {basicTimeFormat(task.created_at)}
+                      {basicLocalTimeFormat(task.created_at)}
                     </TableCell>
                     <TableCell className="w-1/12">
                       <TaskActions task={task} />

skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx

@@ -1,7 +1,7 @@
 import { getClient } from "@/api/AxiosClient";
 import { TaskApiResponse } from "@/api/types";
 import { useQuery } from "@tanstack/react-query";
-import { basicTimeFormat } from "@/util/timeFormat";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import {
   Table,
   TableBody,
@@ -77,8 +77,11 @@ function QueuedTasks() {
                   <TableCell className="w-1/4">
                     <StatusBadge status={task.status} />
                   </TableCell>
-                  <TableCell className="w-1/4">
-                    {basicTimeFormat(task.created_at)}
+                  <TableCell
+                    className="w-1/4"
+                    title={basicTimeFormat(task.created_at)}
+                  >
+                    {basicLocalTimeFormat(task.created_at)}
                   </TableCell>
                 </TableRow>
               );

skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { basicTimeFormat } from "@/util/timeFormat";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { LatestScreenshot } from "./LatestScreenshot";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
@@ -70,7 +70,9 @@ function RunningTasks() {
             <LatestScreenshot id={task.task_id} />
           </div>
         </CardContent>
-        <CardFooter>Created: {basicTimeFormat(task.created_at)}</CardFooter>
+        <CardFooter title={basicTimeFormat(task.created_at)}>
+          Created: {basicLocalTimeFormat(task.created_at)}
+        </CardFooter>
       </Card>
     );
   });