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 (
+    <Tooltip
+      title={`
+        ${
+          task.finishedAt ? `Finished at: ${formatDate(task.finishedAt)} |` : ""
+        }
+        ${`Created at: ${formatDate(task.createdAt)}`}
+      `}
+      placement="top-start"
+    >
       <ListItem
         secondaryAction={
           finished ? null : (
-          <IconButton onClick={handleDelete} disabled={blockInteration} edge="end" aria-label="delete">
+            <IconButton
+              onClick={handleDelete}
+              disabled={blockInteration}
+              edge="end"
+              aria-label="delete"
+            >
               <DeleteIcon />
             </IconButton>
           )
         }
       >
         <ListItemAvatar>
-        <Checkbox onChange={handleCheck} disabled={blockInteration} checked={blockInteration} />
+          <Checkbox
+            onChange={handleCheck}
+            disabled={blockInteration}
+            checked={blockInteration}
+          />
         </ListItemAvatar>
-      <ListItemText primary="Single-line item" />
+        <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()
+  );
+};