design request card
This commit is contained in:
@@ -1,25 +1,50 @@
|
||||
import {Card, CardContent, CardHeader, Grid, Typography} from "@mui/material";
|
||||
import SellIcon from '@mui/icons-material/Sell';
|
||||
import {Box, Button, Card, CardContent, Grid, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
import moment from "jalali-moment";
|
||||
import {LinkRouting} from "@witel/webapp-builder";
|
||||
import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
const RequestCard = ({item}) => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Grid item xs={12} lg={6} xl={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}
|
||||
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , paddingBottom: '16px !important'}}>
|
||||
<Box
|
||||
sx={{
|
||||
borderLeft: '6px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '6px 0px 0px 6px',
|
||||
paddingLeft: '10px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{lineHeight: 2 , fontWeight:'bold'}}>
|
||||
{`${t("LoanFollowUp.loan_unique_code")}: ${item.unique_id}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_date")}: ${moment(item.created_at).locale("fa").format("HH:mm | YYYY/MM/DD")}`}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_bank_branch")}: ${item.banknum === null ? '-' : item.banknum}`}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_status")}: `}
|
||||
{item.status}
|
||||
{item.status === 'Pending' && <AccessTimeFilledIcon sx={{verticalAlign: 'middle', marginLeft: '4px' , color: '#48a4df'}}/>}
|
||||
{item.status === 'Approved' && <CheckCircleIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'green'}}/>}
|
||||
{item.status === 'Rejected' && <CancelIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'red'}}/>}
|
||||
</Typography>
|
||||
<Button variant="contained" color="primary" sx={{alignSelf: 'flex-end'}}>
|
||||
<LinkRouting underline="none" color="inherit" href={`/dashboard/navgan/${item.unique_id}/show`}>
|
||||
{t("LoanFollowUp.loan_details")}
|
||||
</LinkRouting>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user