diff --git a/client/src/components/ProspectingActiveAccount/TimeLine.js b/client/src/components/ProspectingActiveAccount/TimeLine.js
index a2eb9ef..9c00a7d 100644
--- a/client/src/components/ProspectingActiveAccount/TimeLine.js
+++ b/client/src/components/ProspectingActiveAccount/TimeLine.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Typography, Box } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Typography, Box, Tooltip } from "@mui/material";
import {
AccessTime,
Call,
@@ -9,46 +9,136 @@ import {
} from "@mui/icons-material";
// Function to map icon names to actual icons
-const getIcon = (iconName, color) => {
+const getIcon = (iconName, color, total) => {
+ let title = `${total} ${iconName}`;
switch (iconName) {
case "Message":
- return ;
+ return (
+
+
+
+ );
case "Dial":
- return ;
+ return (
+
+
+
+ );
case "Meeting":
- return ;
+ return (
+
+
+
+ );
case "Opportunity":
- return ;
+ return (
+
+
+
+ );
default:
- return ;
+ return (
+
+
+
+ );
}
};
+// Helper function to format the date
+const formatDate = (dateStr) => {
+ const date = new Date(dateStr);
+ const year = date.getFullYear();
+ const day = String(date.getDate()).padStart(2, "0");
+ const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
+ return `${day}/${month}/${year}`;
+};
+
+// Helper function to generate all dates for the past month
+function generateDatesForLastMonth() {
+ const now = new Date();
+ const oneMonthAgo = new Date();
+ oneMonthAgo.setDate(now.getDate() - 30); // Set the date 30 days ago
+
+ const dates = [];
+ let currentDate = new Date(oneMonthAgo);
+
+ while (currentDate <= now) {
+ dates.push(formatDate(currentDate));
+ currentDate.setDate(currentDate.getDate() + 1); // Move to the next day
+ }
+
+ return dates;
+}
+
const MyTimelineComponent = ({ tasks }) => {
- // Sample data
const [text, setText] = useState("");
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [maxPage, setMaxPage] = useState(1);
useEffect(() => {
- let array = tasks.map((e, index) => {
- const date = new Date(e.CreatedDate);
- const day = String(date.getDate()).padStart(2, "0");
- const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
- const formattedDate = `${day}/${month}`;
- let format = "top";
- let color = "#7AAD67";
- let icon = e.Subject;
- if (e.Priority === "Priority") color = "#DD4040";
- let obj = { id: index, icon, date: formattedDate, color, format };
- return obj;
+ const allDates = generateDatesForLastMonth();
+
+ const result = allDates.map((formattedDate) => {
+ // Find tasks for the current date
+ const tasksForDate = tasks.filter(
+ (task) => formatDate(new Date(task.CreatedDate)) === formattedDate
+ );
+
+ if (tasksForDate.length > 0) {
+ // There are tasks for this date, process them as before
+ const detail = [];
+ let total = 0;
+ let icons = [];
+ let color = "#7AAD67"; // Default color
+
+ tasksForDate.forEach((task) => {
+ const icon = task.Subject;
+ total++;
+ color = task.Priority === "Priority" ? "#DD4040" : "#7AAD67"; // Set color based on Priority
+
+ const detailEntry = detail.find((d) => d[0] === icon);
+ if (detailEntry) {
+ detailEntry[1]++;
+ } else {
+ detail.push([icon, 1]);
+ icons.push(icon);
+ }
+ });
+
+ return {
+ total,
+ detail,
+ icons,
+ date: formattedDate,
+ color,
+ format: "top",
+ };
+ } else {
+ // No tasks for this date
+ return {
+ total: 0,
+ detail: [],
+ icons: [],
+ date: formattedDate,
+ color: "#7AAD67", // Default color
+ format: "top",
+ };
+ }
});
- setText(array[0].date + " - " + array[array.length - 1].date);
- let maxPage = Math.ceil(array.length / 8);
+
+ // Update the state
+ setData(result);
+ setText(`${result[0].date} - ${result[result.length - 1].date}`);
+
+ const maxPage = Math.ceil(result.length / 8);
setPage(maxPage);
setMaxPage(maxPage);
- setData(array);
}, [tasks]);
return (
@@ -121,7 +211,7 @@ const MyTimelineComponent = ({ tasks }) => {
display="flex"
flexGrow="1"
alignItems="center"
- justifyContent="start"
+ justifyContent="center"
>
{
{data
- .filter((e, i) => i > (page - 1) * 8 && i <= page * 8)
+ .filter((e, i) => i >= (page - 1) * 8 && i <= page * 8)
.map((el, index) => (
{
justifyContent="center"
sx={{ height: 200 }}
>
- {el.format == "bottom" && index < data.length && (
-
- )}
- {getIcon(el.icon, el.color)}
+
+ {el.detail.map((e) => getIcon(e[0], el.color, e[1]))}
+
{el.format == "top" && index < data.length && (