change content first page and fixed bugs

src/core/components/timelines/DoneTimeLine.jsx

@@ -0,0 +1,35 @@
+import {
+    TimelineConnector,
+    TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    TimelineOppositeContent,
+    TimelineSeparator
+} from "@mui/lab";
+import DoneIcon from "@mui/icons-material/Done";
+import {Typography} from "@mui/material";
+
+const DoneTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
+    return (
+        <TimelineItem>
+            <TimelineOppositeContent
+                sx={{m: 'auto 0'}}
+                align="right"
+                variant="body2"
+                color="text.secondary"
+            >{date}</TimelineOppositeContent>
+            <TimelineSeparator>
+                <TimelineDot color={'success'}>
+                    <DoneIcon/>
+                </TimelineDot>
+                {position !== 'end' && <TimelineConnector/>}
+            </TimelineSeparator>
+            <TimelineContent sx={{py: '12px', px: 2}}>
+                <Typography variant="h6" component="span">{primaryLabel}</Typography>
+                <Typography variant="body2" color={'gray'}>{secondaryLabel}</Typography>
+            </TimelineContent>
+        </TimelineItem>
+    )
+}
+
+export default DoneTimeLine

src/core/components/timelines/InProgressTimeLine.jsx

@@ -0,0 +1,33 @@
+import {
+    TimelineConnector,
+    TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    TimelineOppositeContent,
+    TimelineSeparator
+} from "@mui/lab";
+import {CircularProgress, Typography} from "@mui/material";
+
+const InProgressTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
+    return (
+        <TimelineItem sx={{minHeight: 90}}>
+            <TimelineOppositeContent
+                sx={{m: 'auto 0'}}
+                variant="body2"
+                color="text.secondary"
+            >{date}</TimelineOppositeContent>
+            <TimelineSeparator>
+                <TimelineDot color="primary">
+                    <CircularProgress color={'inherit'} size={40}/>
+                </TimelineDot>
+                {position !== 'end' && <TimelineConnector/>}
+            </TimelineSeparator>
+            <TimelineContent sx={{py: '12px', px: 2}}>
+                <Typography variant="h6" component="span">{primaryLabel}</Typography>
+                <Typography variant="body2" color={'gray'}>{secondaryLabel}</Typography>
+            </TimelineContent>
+        </TimelineItem>
+    )
+}
+
+export default InProgressTimeLine

src/core/components/timelines/OpenTimeLine.jsx

@@ -0,0 +1,34 @@
+import {
+    TimelineConnector,
+    TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    TimelineOppositeContent,
+    TimelineSeparator
+} from "@mui/lab";
+import CallMadeIcon from "@mui/icons-material/CallMade";
+import {Typography} from "@mui/material";
+
+const OpenTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
+    return (
+        <TimelineItem>
+            <TimelineOppositeContent
+                sx={{m: 'auto 0'}}
+                variant="body2"
+                color="text.secondary"
+            >{date}</TimelineOppositeContent>
+            <TimelineSeparator>
+                <TimelineDot>
+                    <CallMadeIcon/>
+                </TimelineDot>
+                {position !== 'end' && <TimelineConnector/>}
+            </TimelineSeparator>
+            <TimelineContent sx={{py: '12px', px: 2}}>
+                <Typography variant="h6" component="span">{primaryLabel}</Typography>
+                <Typography variant="body2" color={'gray'}>{secondaryLabel}</Typography>
+            </TimelineContent>
+        </TimelineItem>
+    )
+}
+
+export default OpenTimeLine