Feat/richer activation

client/src/components/ProspectingActiveAccount/CardActiveAccount.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Card, CardContent, Typography, Divider, Box } from '@mui/material';
+
+const ActivatedContacts = ({ data }) => {
+  const contacts = [
+    { name: 'Contact Name 1', status: 'Activated', activities: 4 },
+    { name: 'Contact Name 2', status: 'Engaged', activities: 2 },
+    { name: 'Contact Name 3', status: 'Activated', activities: 0 },
+    { name: 'Contact Name 4', status: 'Activated', activities: 4 },
+    { name: 'Contact Name 5', status: 'Engaged', activities: 2 },
+    { name: 'Contact Name 6', status: 'Activated', activities: 0 },
+  ];
+
+  return (
+    <Card
+      sx={{
+        borderRadius: '20px',
+        boxShadow: '0px 0px 25px rgba(0, 0, 0, 0.1)',
+        padding: 2,
+        maxWidth: 300,
+        margin: 'auto',
+        height: 626.34
+      }}
+    >
+      <CardContent sx={{
+        overflowY: 'auto', // Enable vertical scrolling
+        maxHeight: '100%', // Ensure the content doesn't overflow outside the card
+        paddingRight: 1,   // Add padding to avoid scrollbar overlap
+      }}>
+        <Typography variant="h2" align="center" sx={{
+          fontFamily: 'Albert Sans',
+          fontWeight: 700,
+          fontSize: '24px',
+          lineHeight: '22.32px',
+          letterSpacing: '-3%',
+          marginBottom: 2
+        }}>
+          Activated Contacts
+        </Typography>
+
+        {data.map(({ first_name, last_name }, index) => (
+          <Box key={index}>
+            <Typography
+              variant="body1"
+              align="center"
+              sx={{ fontWeight: 700, color: '#FF6F00' }}
+            >
+              {first_name} {last_name}
+            </Typography>
+            <Box display="flex" justifyContent="space-between" mt={1}>
+              <Box display="flex" flexDirection="column" justifyItems="center">
+                <Typography variant="caption" align="center" >STATUS:</Typography>
+                <Typography variant="body2" fontWeight="600" align="center">
+                  Activated
+                </Typography>
+              </Box>
+              <Box display="flex" flexDirection="column" justifyItems="center">
+                <Typography variant="caption" align="center">TOTAL ACTIVITIES:</Typography>
+                <Typography variant="body2" fontWeight="600" align="center">
+                  3
+                </Typography>
+              </Box>
+            </Box>
+            {index < contacts.length - 1 && <Divider sx={{ marginY: 0.5 }} />}
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ActivatedContacts;

client/src/components/ProspectingActiveAccount/TimeLine.js

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Box } from '@mui/material';
+import { AccessTime, Call, Message, Event, BusinessCenter } from '@mui/icons-material';
+
+// Function to map icon names to actual icons
+const getIcon = (iconName, color) => {
+  switch (iconName) {
+    case 'Message':
+      return <Message sx={{ color, marginLeft: "-100%" }} />;
+    case 'Dial':
+      return <Call sx={{ color, marginLeft: "-100%" }} />;
+    case 'Meeting':
+      return <Event sx={{ color, marginLeft: "-100%" }} />;
+    case 'Opportunity':
+      return <BusinessCenter sx={{ color, marginLeft: "-100%" }} />;
+    default:
+      return <AccessTime sx={{ color, marginLeft: "-100%" }} />;
+  }
+};
+
+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
+    })
+    setText(array[0].date + ' - ' + array[array.length - 1].date)
+    let maxPage = Math.ceil(array.length / 10)
+    setPage(maxPage)
+    setMaxPage(maxPage)
+    setData(array)
+  }, [])
+
+  return (
+    <div>
+      <Typography variant="h2" align="center" sx={{
+        fontFamily: 'Albert Sans',
+        fontWeight: 700,
+        fontSize: '24px',
+        lineHeight: '22.32px',
+        letterSpacing: '-3%',
+        paddingTop: 2,
+        color: "#1E242F"
+      }}>
+        Timeline
+      </Typography>
+      <Typography variant="h2" align="center" sx={{
+        fontFamily: 'Albert Sans',
+        fontSize: '18px',
+        lineHeight: '22.32px',
+        letterSpacing: '-3%',
+        paddingTop: 1,
+        paddingBottom: 4,
+        color: "#4C4C4C"
+      }}>
+        {text}
+      </Typography>
+      <Box display="flex" justifyContent="center" alignItems="center">
+        {/* Header */}
+
+        {
+          page > 1 && (
+            <Box sx={{ cursor: 'pointer' }} onClick={() => setPage(page - 1)} display="flex" alignItems="center" pb={6} mb={2} mx={2} height="80px">
+              <svg xmlns="http://www.w3.org/2000/svg" width="23" height="50" viewBox="0 0 23 50" fill="none">
+                <path d="M22 1L1 25.5L22 49.5" stroke="#4C4C4C" />
+              </svg>
+              <Typography sx={{ color: "#533AF3", marginLeft: '8px', cursor: 'pointer' }}>Previous</Typography>
+            </Box>
+          )
+        }
+
+        {/* Timeline */}
+        <Box display="flex" flexGrow="1" alignItems="center" justifyContent="center">
+          <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            position="relative"
+            justifyContent="center"
+            sx={{ height: 200 }}
+          >
+            <Box
+              sx={{
+                height: '50px',
+                marginTop: '34px',
+                marginBottom: '8px',
+                borderTop: '4px solid gray',
+                width: '100px'
+              }}
+            />
+          </Box>
+
+          {
+            data.filter((e, i) => i > (page - 1) * 10 && i <= page * 10).map((el, index) => (
+              <Box
+                key={index}
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                position="relative"
+                justifyContent="center"
+                sx={{ height: 200 }}
+              >
+                {
+                  el.format == "bottom" && index < data.length && (
+                    <Box
+                      sx={{
+                        borderLeft: el.line || '1px dashed gray', // Dashed line between icons
+                        height: '50px',                // Adjust height of the dashed line
+                        marginTop: '64px',               // Adjust spacing between icon and dashed line
+                        marginBottom: '8px',            // Adjust spacing at the bottom
+                        borderTop: '4px solid gray',
+                        width: '100px'
+                      }}
+                    />
+                  )
+                }
+                {getIcon(el.icon, el.color)}
+                {
+                  el.format == "top" && index < data.length && (
+                    <Box
+                      sx={{
+                        borderLeft: el.line || '1px dashed gray', // Dashed line between icons
+                        height: '50px',                // Adjust height of the dashed line
+                        marginTop: '8px',               // Adjust spacing between icon and dashed line
+                        marginBottom: '98px',            // Adjust spacing at the bottom
+                        borderBottom: '4px solid gray',
+                        width: '100px'
+
+                      }}
+                    />
+                  )
+                }
+                {/* Date Below Icon */}
+                <Typography variant="caption" align='center' sx={{ textAlign: 'center', marginLeft: "-100%", marginTop: '8px', position: 'absolute', bottom: 0 }}>{el.line ? <b style={{ color: "gray" }}>{el.label}<br /></b> : <></>} {el.date} {el.id}</Typography>
+              </Box>
+            ))
+          }
+        </Box>
+        {
+          page < maxPage && (
+            <Box sx={{ cursor: 'pointer' }} onClick={() => setPage(page + 1)} display="flex" alignItems="center" pb={6} mb={2} mx={2} height="80px">
+              <svg xmlns="http://www.w3.org/2000/svg" width="23" height="50" viewBox="0 0 23 50" fill="none">
+                <path d="M22 1L1 25.5L22 49.5" stroke="#4C4C4C" transform="rotate(180 11.5 25)" />
+              </svg>
+              <Typography sx={{ color: "#533AF3", marginLeft: '8px', cursor: 'pointer' }}>Next</Typography>
+            </Box>
+          )
+        }
+      </Box>
+    </div >
+  );
+};
+
+export default MyTimelineComponent;