LFFE-21 Merge branch 'feature/LFFE-21_transportation_assistance_show_file' into 'develop'

src/core/components/CustomAccordion.jsx

@@ -0,0 +1,72 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Typography,
+    Grid, ButtonGroup, Button, CircularProgress
+} from "@mui/material";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import Check from "@mui/icons-material/Check";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+
+const CustomAccordion = ({ title,
+                             hasOpened,
+                             hasAccordionOpened,
+                             handleAccordionChange,
+                             accordionIndex,
+                             handleSizeChange }) => {
+    const t = useTranslations();
+    const [downloadStatus, setDownloadStatus] = useState('initial');
+    const handleDownloadClick = (setStatus) => {
+
+        console.log(setStatus)
+        setStatus('downloading');
+        setTimeout(() => {
+            setStatus('completed');
+            setTimeout(() => {
+                setStatus('initial');
+            }, 2500);
+        }, 2000);
+        // Perform the actual download logic here
+    };
+    return(
+    <Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
+        mb: 2,
+        boxShadow: 1,
+        backgroundColor: "#f7f7f7"
+    }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                    <Typography sx={{ fontWeight: 500, color: "primary.main" }}>{title}</Typography>
+                    {hasAccordionOpened && <VerifiedIcon style={{ color: "green" }} />}
+                </Box>
+            </Box>
+        </AccordionSummary>
+        <AccordionDetails sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+            <Grid container direction="column" alignItems="center">
+                <Grid item>
+                    <ButtonGroup variant="contained" aria-label="outlined primary button group">
+                        <Button onClick={() => handleDownloadClick(setDownloadStatus)}>
+                            {downloadStatus === 'completed' ? (
+                                <Check sx={{ color: 'white' }} fontSize="small" />
+                            ) : downloadStatus === 'downloading' ? (
+                                <CircularProgress sx={{ color: 'white' }} size={18} />
+                            ) : (
+                                <FileDownloadOutlinedIcon sx={{ color: 'white' }} fontSize="small" />
+                            )}
+                        </Button>
+                    </ButtonGroup>
+                </Grid>
+            </Grid>
+        </AccordionDetails>
+    </Accordion>
+);
+}
+
+export default CustomAccordion;

src/core/components/DownloadSection.jsx

@@ -0,0 +1,38 @@
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import Check from '@mui/icons-material/Check';
+import {CircularProgress} from "@mui/material"
+const DownloadSection = ({ downloadStatus, onDownloadClick }) => {
+    return (
+        <div
+            style={{
+                cursor: 'pointer',
+                width: '30',
+                height: '30',
+                backgroundColor: downloadStatus === 'completed' ? '#0070f3' : 'white',
+                border: `1px solid ${downloadStatus === 'completed' ? '#0070f3' : 'gray'}`,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                transition: 'background 0.2s, box-shadow 0.2s',
+                boxShadow: downloadStatus === 'completed' ? '0 0 5px rgba(0, 112, 243, 0.5)' : 'none',
+                padding:'5px'
+            }}
+            onClick={onDownloadClick}
+        >
+            {downloadStatus === 'completed' ? (
+                <>
+                    <Check sx={{ color: 'white' }} fontSize="medium" />
+                </>
+            ) : downloadStatus === 'downloading' ? (
+                <CircularProgress size={25} />
+            ) : (
+                <>
+                    <FileDownloadOutlinedIcon sx={{ color: '#0070f3' }} fontSize="medium" />
+                </>
+            )}
+        </div>
+    );
+};
+
+export default DownloadSection;