TF-85 make follow up request and page design for navgan

src/components/dashboard/navgan/followUp-loan/RequestCard.jsx

@@ -0,0 +1,29 @@
+import {Card, CardContent, CardHeader, Grid, Typography} from "@mui/material";
+import SellIcon from '@mui/icons-material/Sell';
+import {useTranslations} from "next-intl";
+
+
+const RequestCard = ({item}) => {
+    const t = useTranslations();
+    return (
+        <Grid item xs={12} md={6} lg={4}>
+            <Card sx={{
+                width: "100%",
+                boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
+            }}>
+                <CardHeader
+                    avatar={<SellIcon color="primary"/>}
+                    title={`${t("LoanFollowUp.request_number")}: (${item.id})`}
+                    subheader={item.latest_history_created_at}
+                />
+                <CardContent sx={{pt: 0}}>
+                    <Typography variant="button">
+                        {item.loan_state}
+                    </Typography>
+                </CardContent>
+            </Card>
+        </Grid>
+    );
+};
+
+export default RequestCard;

src/components/dashboard/navgan/followUp-loan/index.jsx

@@ -1,66 +1,37 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";
-import useUser from "@/lib/app/hooks/useUser";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
-    Avatar,
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    Collapse,
     Grid,
-    IconButton,
     Stack,
-    Typography
 } from "@mui/material";
-import {styled} from "@mui/material/styles";
-import {useTranslations} from "next-intl";
-import {useState} from "react";
-
-const ExpandMore = styled((props) => {
-    const {expand, ...other} = props;
-    return <IconButton {...other} />;
-})(({theme, expand}) => ({
-    transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
-    marginLeft: "auto",
-    transition: theme.transitions.create("transform", {
-        duration: theme.transitions.duration.shortest,
-    }),
-}));
-
-const data = [
-    {
-        name: "جان دو",
-        date: "۱۳۹۹/۰۴/۲۵",
-        description:
-            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
-    },
-    {
-        name: "جین اسمیت",
-        date: "۱۳۹۹/۰۴/۲۶",
-        description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.",
-    },
-    {
-        name: "مایک جانسون",
-        date: "۱۳۹۹/۰۴/۲۷",
-        description:
-            "دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.",
-    },
-];
+import {useEffect, useState} from "react";
+import {SHOW_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
+import useLoading from "@/lib/app/hooks/useLoading";
+import useRequest from "@/lib/app/hooks/useRequest";
+import moment from "jalali-moment";
+import RequestCard from "@/components/dashboard/navgan/followUp-loan/RequestCard";
 
 const LoanFollowUpComponent = () => {
-    const t = useTranslations();
-    const {token} = useUser();
-
-    const [expanded, setExpanded] = useState([]);
-
-    const handleExpandClick = (index) => {
-        setExpanded((prevExpanded) => {
-            const newExpanded = [...prevExpanded];
-            newExpanded[index] = !newExpanded[index];
-            return newExpanded;
-        });
-    };
+    const requestServer = useRequest();
+    const {setLoadingPage} = useLoading();
+    const [requestsList, setRequestsList] = useState([]);
+    // get form data
+    useEffect(() => {
+        setLoadingPage(true)
+        requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", {auth: true, notification: false})
+            .then(function ({data}) {
+                const items = data.data;
+                const formattedData = items.map((item, index) => ({
+                    id: item.id,
+                    latest_history_created_at: moment(item.latest_history_created_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
+                    state_id: item.state_id,
+                    loan_state: item.loan_state,
+                }));
+                setRequestsList(formattedData);
+                setLoadingPage(false)
+            })
+            .catch(function (error) {
+            })
+    }, []);
 
     return (
         <DashboardLayouts>
@@ -77,42 +48,8 @@ const LoanFollowUpComponent = () => {
                     rowSpacing={2}
                     sx={{alignItems: "start", justifyContent: "center"}}
                 >
-                    {data.map((item, index) => (
-                        <Grid item xs={12} md={6} lg={4} key={index}>
-                            <Card sx={{width: "100%"}}>
-                                <CardHeader
-                                    avatar={
-                                        <Avatar
-                                            sx={{bgcolor: "primary.main"}}
-                                            aria-label="recipe"
-                                        ></Avatar>
-                                    }
-                                    title={item.name}
-                                    subheader={item.date}
-                                />
-                                <CardContent>
-                                    <Typography variant="body2" color="text.secondary">
-                                        متن تست
-                                    </Typography>
-                                </CardContent>
-                                <CardActions disableSpacing>
-                                    <ExpandMore
-                                        expand={expanded[index]}
-                                        onClick={() => handleExpandClick(index)}
-                                        aria-expanded={expanded[index]}
-                                        aria-label="show more"
-                                    >
-                                        <ExpandMoreIcon/>
-                                    </ExpandMore>
-                                </CardActions>
-                                <Collapse in={expanded[index]} timeout="auto" unmountOnExit>
-                                    <CardContent>
-                                        <Typography paragraph>اطلاعات تکمیلی:</Typography>
-                                        <Typography paragraph>{item.description}</Typography>
-                                    </CardContent>
-                                </Collapse>
-                            </Card>
-                        </Grid>
+                    {requestsList.map((item, index) => (
+                        <RequestCard item={item} key={item.id}/>
                     ))}
                 </Grid>
             </Stack>

src/core/data/apiRoutes.js

@@ -6,6 +6,7 @@ export const LOGIN = BASE_URL + "/login";
 export const SEND_OTP_TOKEN = BASE_URL + "/otp";
 export const REGISTER = BASE_URL + "/register";
 export const USER_INFO = BASE_URL + "/profile/info";
+export const SHOW_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/loan/index";
 export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/loan/store";
 export const SHOW_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/index";
 export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/store";