From 2361cfa8f782496f7854016d2e44c3f59c0b0883 Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Tue, 19 Dec 2023 13:36:05 +0330
Subject: [PATCH] design request card

---
 .../navgan/followUp-loan/RequestCard.jsx      | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx b/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
index 6e5dfd3..bc2d07d 100644
--- a/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
+++ b/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
@@ -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>