add task tooltip informations

client/src/pages/Projects/components/Project/TasksListItem.tsx

@@ -4,15 +4,17 @@ import {
   IconButton,
   ListItem,
   ListItemAvatar,
-  ListItemText
+  ListItemText,
+  Tooltip,
 } from "@mui/material";
 import { useState } from "react";
+import { formatDate } from "../../../../utils/formatDate";
 
 export type Task = {
   id: number;
   description: string;
-  createdAt: Date;
+  createdAt: string;
-  finishedAt?: Date;
+  finishedAt?: string;
 };
 
 export type TasksListItemProps = {
@@ -42,19 +44,38 @@ export const TasksListItem = ({
   const blockInteration = finished || isLoading;
 
   return (
-    <ListItem
+    <Tooltip
-      secondaryAction={
+      title={`
-        finished ? null : (
+        ${
-          <IconButton onClick={handleDelete} disabled={blockInteration} edge="end" aria-label="delete">
+          task.finishedAt ? `Finished at: ${formatDate(task.finishedAt)} |` : ""
-            <DeleteIcon />
+        }
-          </IconButton>
+        ${`Created at: ${formatDate(task.createdAt)}`}
-        )
+      `}
-      }
+      placement="top-start"
     >
-      <ListItemAvatar>
+      <ListItem
-        <Checkbox onChange={handleCheck} disabled={blockInteration} checked={blockInteration} />
+        secondaryAction={
-      </ListItemAvatar>
+          finished ? null : (
-      <ListItemText primary="Single-line item" />
+            <IconButton
-    </ListItem>
+              onClick={handleDelete}
+              disabled={blockInteration}
+              edge="end"
+              aria-label="delete"
+            >
+              <DeleteIcon />
+            </IconButton>
+          )
+        }
+      >
+        <ListItemAvatar>
+          <Checkbox
+            onChange={handleCheck}
+            disabled={blockInteration}
+            checked={blockInteration}
+          />
+        </ListItemAvatar>
+        <ListItemText primary={task.description} />
+      </ListItem>
+    </Tooltip>
   );
 };

client/src/utils/formatDate.ts

@@ -0,0 +1,7 @@
+export const formatDate = (date: string) => {
+  return (
+    new Date(date).toLocaleDateString() +
+    " " +
+    new Date(date).toLocaleTimeString()
+  );
+};