Files
expert-front/src/components/dashboard/refahi/loan-followup/Form/BankPayment/BankPaymentContent.jsx

97 lines
3.8 KiB
JavaScript

import {
Box,
LinearProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import useRequest from "@/lib/app/hooks/useRequest";
import { GET_REFAHI_BANK_PAYMENT } from "@/core/data/apiRoutes";
import moment from "jalali-moment";
const BankPaymentContent = ({ rowId }) => {
const t = useTranslations();
const requestServer = useRequest({ auth: true, notification: false });
const [BankPaymentDetail, setBankPaymentDetail] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(false);
useEffect(() => {
requestServer(`${GET_REFAHI_BANK_PAYMENT}/${rowId}`, "get")
.then((res) => {
setBankPaymentDetail(res.data.data);
setIsLoading(false);
})
.catch((error) => {
setError(true);
});
}, []);
return (
<Box>
{error ? (
<Typography
sx={{
padding: 2,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{t("LoanHistory.Table_history_error")}
</Typography>
) : isLoading ? (
<LinearProgress sx={{ width: "100%" }} />
) : (
<Paper
elevation={0}
sx={{
width: "100%",
overflow: "hidden",
"*::-webkit-scrollbar": {
width: "0.5em",
},
"*::-webkit-scrollbar-thumb": {
backgroundColor: "primary.main",
},
}}
>
<TableContainer sx={{ maxHeight: 600 }}>
<Table stickyHeader sx={{ minWidth: 800 }}>
<TableHead>
<TableRow>
<TableCell>{t("BankPaymentDialog.Table_head_installment_number")}</TableCell>
<TableCell>{t("BankPaymentDialog.Table_head_remaining_facility")}</TableCell>
<TableCell>{t("BankPaymentDialog.Table_head_paid_facility")}</TableCell>
<TableCell>{t("BankPaymentDialog.Table_head_paid_date")}</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableCell>{BankPaymentDetail?.installment_number}</TableCell>
<TableCell> {BankPaymentDetail?.paid_facility}</TableCell>
<TableCell> {BankPaymentDetail?.remaining_facility}</TableCell>
<TableCell>
{BankPaymentDetail.paid_date
? moment(BankPaymentDetail.paid_date)
.locale("fa")
.format("HH:mm | yyyy/MM/DD")
: null}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Paper>
)}
</Box>
);
};
export default BankPaymentContent;