Merge branch 'develop' of https://gitlab.com/witel-front-end/loan-facilities/user into feature/yasi_delet_signup_check_login

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

src/core/components/timelines/timelineManager.jsx

@@ -0,0 +1,16 @@
+import OpenTimeLine from "@/core/components/timelines/OpenTimeLine";
+import InProgressTimeLine from "@/core/components/timelines/InProgressTimeLine";
+import DoneTimeLine from "@/core/components/timelines/DoneTimeLine";
+
+const TimelineManager = (props) => {
+    switch (props.status) {
+        case 'open':
+            return <OpenTimeLine {...props} />
+        case 'in progress':
+            return <InProgressTimeLine {...props} />
+        case 'done':
+            return <DoneTimeLine {...props} />
+    }
+}
+
+export default TimelineManager

src/core/data/sidebarMenu.js

@@ -6,27 +6,30 @@ const sidebarMenu = [
     [
         {
             key: "sidebar.dashboard",
+            name: "sidebar.dashboard",
             type: "page",
             route: "/dashboard",
-            icon: <SpaceDashboardIcon/>,
+            icon: <SpaceDashboardIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
-            permission_name: "all"
+            permission: "all"
         },
         {
             key: "sidebar.add-request-loan",
+            name: "sidebar.add-request-loan",
             type: "page",
             route: "/dashboard/navgan/add-request-loan",
-            icon: <DataSaverOnIcon/>,
+            icon: <DataSaverOnIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
-            permission_name: "can_request_a_new_loan"
+            permission: "can_request_a_new_loan"
         },
         {
             key: "sidebar.followUp-loan",
+            name: "sidebar.followUp-loan",
             type: "page",
             route: "/dashboard/navgan/followUp-loan",
-            icon: <BookmarkAddedIcon/>,
+            icon: <BookmarkAddedIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
-            permission_name: "all"
+            permission: "all"
         },
     ],
 ];