implementation of dynamic timeline in first page

src/components/first/LoanDescription/TimeLineDetails.jsx

@@ -1,19 +1,73 @@
 import {useTranslations} from "next-intl";
+import {useEffect, useState} from "react";
+import {useRequest} from "@witel/webapp-builder";
+import TimelineManager from "@/core/components/timelines/timelineManager";
+import moment from "jalali-moment";
 import {Timeline} from "@mui/lab";
-import OpenTimeLine from "@/core/components/timelines/OpenTimeLine";
-import InProgressTimeLine from "@/core/components/timelines/InProgressTimeLine";
 
 const TimeLineDetails = () => {
     const t = useTranslations();
+    const request = useRequest({notification: false, auth: false})
+    const [timeLineList, setTimeLineList] = useState([])
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        setLoading(true)
+        request(process.env.NEXT_PUBLIC_CONFIG_APP_URL, 'get').then(res => {
+            setLoading(false)
+            let tempArr = []
+            for (const timeLine of res.data.time_lines.navgan_first_page) {
+                let temp = {}
+                temp['label'] = timeLine.label
+                temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
+                const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
+                const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
+                const today = moment()
+                if (today.isBetween(fromDate, toDate, null, '[]')) {
+                    temp['status'] = 'in progress'
+                } else if (today.isAfter(toDate, null)) {
+                    temp['status'] = 'done'
+                } else if (today.isBefore(fromDate, null)) {
+                    temp['status'] = 'open'
+                }
+                tempArr.push(temp)
+            }
+            setTimeLineList(tempArr)
+        }).catch(() => {
+            setLoading(false)
+        })
+    }, []);
+
     return (
-        <Timeline position="alternate">
-            <InProgressTimeLine date={'10 دی'} primaryLabel={'ثبت نام متقاضی'}
-                                secondaryLabel={'ثبت نام متقاضیان واجد شرایط'}/>
-            <OpenTimeLine date={'10 بهمن'} primaryLabel={'صحت سنجی متقاضیان'}
-                          secondaryLabel={'بررسی و کارشناسی درخواست ها'}/>
-            <OpenTimeLine position={'end'} date={'10 اسفند'} primaryLabel={'ارجاع به بانک'}
-                          secondaryLabel={'فرآیند معرفی ضامن و پرداخت'}/>
-        </Timeline>
+        <>
+            {loading ? (
+                <>loading...</>
+            ) : (
+                <Timeline position="alternate">
+                    {timeLineList.map((timeLine, index) => (
+                        <TimelineManager
+                            key={index}
+                            status={timeLine.status}
+                            date={timeLine.dateLabel}
+                            primaryLabel={timeLine.label.primary}
+                            secondaryLabel={timeLine.label.secondary}
+                            position={index === (timeLineList.length - 1) ? 'end' : ''}
+                        />
+                    ))
+                    }
+                </Timeline>
+            )}
+        </>
     )
+    // return (
+    //     <Timeline position="alternate">
+    //         <InProgressTimeLine date={'10 دی'} primaryLabel={'ثبت نام متقاضی'}
+    //                             secondaryLabel={'ثبت نام متقاضیان واجد شرایط'}/>
+    //         <OpenTimeLine date={'10 بهمن'} primaryLabel={'صحت سنجی متقاضیان'}
+    //                       secondaryLabel={'بررسی و کارشناسی درخواست ها'}/>
+    //         <OpenTimeLine position={'end'} date={'10 اسفند'} primaryLabel={'ارجاع به بانک'}
+    //                       secondaryLabel={'فرآیند معرفی ضامن و پرداخت'}/>
+    //     </Timeline>
+    // )
 }
 export default TimeLineDetails