вывела в ячейке Дата и время выполнения дату , время старта, время завершения и…

вывела в ячейке Дата и время выполнения дату , время старта, время завершения и количество часов на задачу

planner-front/src/components/MyTasksCompoments/CustomTableCell.js

 import * as React from "react";
 import TableCell from "@mui/material/TableCell";
 import Input from "@mui/material/Input";
+import moment from "moment";
 
 const CustomTableCell = ({task,
   name,
   value,
   value2,
+  value3,
   onChange,
   onModalOpen,
   placeholder,
   user
  }) => {
   const styles = { width: "auto", height: "10px"};
-
+  const divStyle={display:"flex",justifyContent:"space-between", flexDirection:"column",fontSize:"12px"}
+  const duration = moment.duration(moment(task.dateTimeDue).diff(moment(task.dateTimeStart)));
+  const hours = Math.round(duration.asHours());
 
    if (task) {
     return (
@@ -22,32 +26,7 @@ const CustomTableCell = ({task,
           align="left"
           style={styles}
         >
-          {task.isEditMode && onChange && name==!"author" && task.author.id==user.id ? (
-            <Input
-              placeholder={placeholder}
-              value={value}
-              name={name}
-              onChange={(e) => onChange(e, task)}
-              style={styles}
-            />
-          ) : (
-            <span>{value}</span>
-          )}
-        </TableCell>
-      </>
-    );
-  }
-
-  if (task && name=="dateTimeStart") {
-    return (
-      <>
-        <TableCell
-          onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
-          align="left"
-          style={styles}
-        >
-          
-          {task.isEditMode && onChange && name==!"author" && task.author.id==user.id ? (
+          {task.isEditMode && onChange && name!=="author" && task.author.id===user.id ? (
             <Input
               placeholder={placeholder}
               value={value}
@@ -55,13 +34,16 @@ const CustomTableCell = ({task,
               onChange={(e) => onChange(e, task)}
               style={styles}
             />
-          ) : (
-            <>
+          ) : name!=="dateTimeStart" ? (
             <span>{value}</span>
-            <div>{"valuehjlhlh"}</div>
-            <span>{value2}</span>
-            </>
-          )}
+          ):(
+            <div  style={divStyle}>
+              <span>{value}</span>
+              <span>{value2}</span>
+              <span>часы:+{hours}</span>
+            </div>
+          )
+          }
         </TableCell>
       </>
     );

planner-front/src/containers/MyTasks/MyTasks.js

@@ -45,7 +45,9 @@ export default function EnhancedTable() {
     task: null,
   });
   const [projects,setProjects]=useState(['1','2'])
+  
  
+
   useEffect(() => {
     dispatch(fetchAllTasks());
     filterProjectsNamesFromTasks()
@@ -207,7 +209,6 @@ useEffect(() => {
       }
       let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
       setProjects(uniqueTitlesProjects)
-      
     }
   }
 
@@ -378,31 +379,21 @@ console.log(tasks)
                               name: "dateTimeStart",
                               value: moment(task.dateTimeStart)
                               .utc()
-                              .format("DD-MM-YYYY hh:mm A"),
+                              .format("DD-MM-YYYY "),
                               value2:moment(task.dateTimeStart)
                               .utc()
-                              .format("hh:mm A")+
-                              "-"+
+                              .format("hh:mm A")+"-"+
                               moment(task.dateTimeDue)
                               .utc()
                               .format("hh:mm A"),
+                          
                               user:user
                             }}>
-                              <span>"время заершения", {moment(task.dateTimeDue)
+                              <span>"время завершения"+ {moment(task.dateTimeDue)
                               .utc()
                               .format("hh:mm A")}</span>
                             </CustomTableCell>
-                          
-                          {/* <CustomTableCell
-                            {...{
-                              task,
-                              name: "dateTimeStart",
-                              value:  moment(task.dateTimeDue)
-                              .utc()
-                              .format("DD-MM-YYYY hh:mm A"),
-                              user:user
-                            }}
-                          /> */}
+                        
                           </>
                         )}