138 lines
6.3 KiB
JavaScript
138 lines
6.3 KiB
JavaScript
import { Box, Chip, Divider, Grid, Skeleton, Stack, Typography } from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import { SHOW_LOAN_REQUEST_NAVGAN, SHOW_LOAN_REQUEST_REFAHI } from "@/core/data/apiRoutes";
|
|
import RequestCard from "@/components/dashboard/followUp-loan/RequestCard";
|
|
import { FullPageLayout, useRequest } from "@witel/webapp-builder";
|
|
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
|
|
import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const LoanFollowUpComponent = () => {
|
|
const t = useTranslations();
|
|
const requestServer = useRequest({ notification: false });
|
|
const [isLoadingNavgan, setIsLoadingNavgan] = useState(false);
|
|
const [isLoadingRefahi, setIsLoadingRefahi] = useState(false);
|
|
const [navganFollowUpList, setNavganFollowUpList] = useState([]);
|
|
const [refahiFollowUpList, setRefahiFollowUpList] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setIsLoadingNavgan(true);
|
|
requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", { auth: true })
|
|
.then(({ data }) => {
|
|
setNavganFollowUpList(data.data);
|
|
setIsLoadingNavgan(false);
|
|
})
|
|
.catch(() => setIsLoadingNavgan(false));
|
|
|
|
setIsLoadingRefahi(true);
|
|
requestServer(SHOW_LOAN_REQUEST_REFAHI, "get", { auth: true })
|
|
.then(({ data }) => {
|
|
setRefahiFollowUpList(data.data);
|
|
setIsLoadingRefahi(false);
|
|
})
|
|
.catch(() => setIsLoadingRefahi(false));
|
|
}, []);
|
|
|
|
return (
|
|
<FullPageLayout>
|
|
<Grid container columnSpacing={2} rowSpacing={2} sx={{ padding: "24px", justifyContent: "center" }}>
|
|
{isLoadingNavgan ? (
|
|
<Grid direction="row" container spacing={4} sx={{ justifyContent: "center", alignItems: "center" }}>
|
|
{[...Array(3)].map((_, index) => (
|
|
<Grid item>
|
|
<Skeleton
|
|
key={index}
|
|
variant="rectangular"
|
|
width={450}
|
|
height={150}
|
|
sx={{ borderRadius: 2 }}
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
navganFollowUpList.length > 0 && (
|
|
<>
|
|
<Stack
|
|
direction="row"
|
|
sx={{ mb: 4, width: "100%" }}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Divider sx={{ flex: 1, mx: 2 }} />
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Chip
|
|
icon={<DirectionsCarIcon />}
|
|
label={
|
|
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
|
{t("LoanFollowUp.loan_follow_up_navgan")}
|
|
</Typography>
|
|
}
|
|
/>
|
|
</Box>
|
|
<Divider sx={{ flex: 1, mx: 2 }} />
|
|
</Stack>
|
|
<Grid container spacing={2} sx={{ justifyContent: "center" }}>
|
|
{navganFollowUpList.map((item) => (
|
|
<RequestCard item={item} key={item.id} />
|
|
))}
|
|
</Grid>
|
|
</>
|
|
)
|
|
)}
|
|
|
|
{isLoadingRefahi ? (
|
|
<Grid
|
|
direction="row"
|
|
container
|
|
spacing={4}
|
|
sx={{ justifyContent: "center", alignItems: "center", my: 4 }}
|
|
>
|
|
{[...Array(3)].map((_, index) => (
|
|
<Grid item>
|
|
<Skeleton
|
|
key={index}
|
|
variant="rectangular"
|
|
width={450}
|
|
height={150}
|
|
sx={{ borderRadius: 2 }}
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
refahiFollowUpList.length > 0 && (
|
|
<>
|
|
<Stack
|
|
direction="row"
|
|
sx={{ my: 4, width: "100%" }}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Divider sx={{ flex: 1, mx: 2 }} />
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Chip
|
|
icon={<VolunteerActivismIcon />}
|
|
label={
|
|
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
|
{t("LoanFollowUp.loan_follow_up_refahi")}
|
|
</Typography>
|
|
}
|
|
/>
|
|
</Box>
|
|
<Divider sx={{ flex: 1, mx: 2 }} />
|
|
</Stack>
|
|
<Grid container spacing={2} sx={{ justifyContent: "center" }}>
|
|
{refahiFollowUpList.map((item) => (
|
|
<RequestCard item={item} key={item.id} />
|
|
))}
|
|
</Grid>
|
|
</>
|
|
)
|
|
)}
|
|
</Grid>
|
|
</FullPageLayout>
|
|
);
|
|
};
|
|
export default LoanFollowUpComponent;
|