icleafreportui 0.1.0

package/src/Reports/ExamPackReport.js

@@ -0,0 +1,554 @@
+import React, { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, Checkbox, InputAdornment } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import Header from '../components/Header';
+import Sidebar from '../components/sidebar';
+import '../App.css';
+import Backdrop from '@mui/material/Backdrop';
+import { DataGrid } from '@mui/x-data-grid';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+
+function ExamPackReport() {
+    const [token] = useState(localStorage.getItem("token"));
+    const navigate = useNavigate();
+    const [subjects, setSubjects] = useState([]);
+    const [courses, setCourses] = useState([]);
+    const [selectedSubject, setSelectedSubject] = useState(null);
+    const [selectedCourse, setSelectedCourse] = useState(null);
+    const [alertMessage, setAlertMessage] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [alertOpen, setAlertOpen] = useState(false);
+
+    const reportType = [
+        {
+            value: "Batch Wise",
+            label: "Batch Wise",
+        },
+        {
+            value: "User Wise",
+            label: "User Wise"
+        }
+    ]
+
+    const [selectedReportType, setSelectedReportType] = useState(null)
+    const [columns, setColumns] = useState(null)
+    const [rows, setRows] = useState([])
+    const [tableShow, setTableShow] = useState(false);
+
+    const [multiLoading, setMultiLoading] = useState(false)
+    const [userSelect, setUserSelect] = useState(false)
+
+    const [selectedUserList, setSelectedUserList] = useState([])
+    const baseURL = process.env.REACT_APP_BASE_URL
+
+    const [tableKey, setTableKey] = useState(0);
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const filteredRows = userSelect
+        ? rows.filter((row) => {
+            const searchTerms = searchQuery
+                .split(',')
+                .map(term => term.trim().toLowerCase())
+                .filter(term => term.length > 0);
+
+            if (searchTerms.length === 0) return true;
+
+            const email = row.userName.toLowerCase();
+            const localPart = email.split('@')[0];
+
+            return searchTerms.some(term => {
+                if (term.includes('@')) {
+                    // Exact full email match
+                    return email === term;
+                } else {
+                    // Match with the part before @
+                    return localPart.includes(term);
+                }
+            });
+        })
+        : rows;
+
+    const batchListColumns = [
+        {
+            field: 'sno',
+            headerName: 'S.No',
+            width: 60,
+            sortable: false,
+            renderCell: (params) => params.api.getAllRowIds().indexOf(params.id) + 1,
+        },
+        { field: 'batchName', headerName: 'Batch Name', width: 230 },
+        {
+            field: 'batchStatus',
+            headerName: 'Status',
+            width: 170,
+            renderCell: (params) => {
+                const isActive = params.value; // Assuming it's a boolean (true/false)
+                return (
+                    <span style={{
+                        color: isActive ? 'green' : 'red',
+                        fontWeight: 'bold'
+                    }}>
+                        {isActive ? 'Active' : 'Inactive'}
+                    </span>
+                );
+            },
+        },
+        {
+            field: 'dailyProgressMail',
+            headerName: 'Daily Progress Mail',
+            width: 130,
+            renderCell: (params) => {
+                const isActive = params.value;
+                return (
+                    <span style={{
+                        color: isActive ? 'green' : 'red',
+                        fontWeight: 'bold'
+                    }}>
+                        {isActive ? 'Active' : 'Inactive'}
+                    </span>
+                );
+            },
+        },
+        {
+            field: "report",
+            headerName: "Report",
+            sortable: false,
+            width: 70,
+            renderCell: (params) =>
+                <FileDownloadOutlinedIcon
+                    onClick={() => handleDownloadBatchReport(params.row)}
+                    fontSize="small"
+                    style={{ cursor: "pointer" }}
+                />
+        },
+    ];
+
+    const userListColumns = [
+        {
+            field: 'sno',
+            headerName: 'S.No',
+            width: 60,
+            sortable: false,
+            renderCell: (params) => params.api.getAllRowIds().indexOf(params.id) + 1,
+        },
+        { field: 'userName', headerName: 'User Name', width: 280 },
+        {
+            field: 'userRoleType',
+            headerName: 'Role Type',
+            width: 200,
+            renderCell: (params) => {
+                const isActive = params.value;
+                return (
+                    <span style={{
+                        color: isActive ? 'green' : 'red',
+                        fontWeight: 'bold'
+                    }}>
+                        {isActive ? 'User' : ''}
+                    </span>
+                );
+            },
+        },
+        {
+            field: "report",
+            headerName: "Report",
+            sortable: false,
+            width: 70,
+            renderCell: (params) =>
+                <FileDownloadOutlinedIcon
+                    onClick={() => handleDownloadSingleUserReport(params.row)}
+                    fontSize="small"
+                    style={{ cursor: "pointer" }}
+                />
+        },
+    ];
+
+    useEffect(() => {
+        if (token == null) {
+            navigate("/login");
+        } else {
+            fetchAllSubjects();
+        }
+    }, []);
+
+    const fetchAllSubjects = async () => {
+        try {
+            const response = await axios({
+                method: "get",
+                url: `${baseURL}api/showAllSubjects`,
+                headers: { Authorization: `Bearer ${token}` },
+            });
+            setSubjects(response.data);
+        } catch (error) {
+            console.error('Error fetching subjects:', error);
+        }
+    };
+
+    const fetchCourses = async (subjectId) => {
+        try {
+            const response = await axios({
+                method: "get",
+                params: { subjectId },
+                url: `${baseURL}api/getCoursesBySubject`,
+                headers: { Authorization: `Bearer ${token}` },
+            });
+            setCourses(response.data);
+        } catch (error) {
+            console.error('Error fetching courses:', error);
+        }
+    };
+
+    const handleSubjectChange = (event, newValue) => {
+        setSelectedSubject(newValue);
+        setSelectedCourse(null);
+        setCourses([]);
+        setSelectedReportType(null)
+        setTableShow(false)
+        setRows([])
+        setColumns([])
+
+        if (newValue?.subjectId) {
+            fetchCourses(newValue.subjectId);
+
+        }
+    };
+
+    const handleCourseChange = (event, newValue) => {
+        setSelectedCourse(newValue);
+        setTableKey((prevKey) => prevKey + 1);
+        fetchReportData(newValue?.id, selectedReportType?.value);
+    };
+
+    const handleReportTypeChange = (event, newValue) => {
+        setSelectedReportType(newValue);
+        setTableKey((prevKey) => prevKey + 1);
+        fetchReportData(selectedCourse?.id, newValue?.value);
+    };
+
+    const fetchReportData = (courseId, reportType) => {
+        if (!selectedSubject?.subjectId || !courseId) return;
+
+        const apiMap = {
+            "Batch Wise": getBatchWiseList,
+            "User Wise": getUserWiseList
+        };
+
+        apiMap[reportType]?.(courseId);
+    };
+
+    const getBatchWiseList = async () => {
+        setLoading(true)
+        try {
+            const response = await axios.get(
+                `${baseURL}api/getCorpCourseBatches?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`,
+                { headers: { Authorization: `Bearer ${token}` } }
+            );
+
+            if (response.status === 200) {
+                setUserSelect(false)
+                setRows(response.data.corpCourseBatches)
+                setColumns(batchListColumns)
+                setTableShow(true)
+            }
+            console.log(response.data, "Batch Wise");
+        } catch (error) {
+            setAlertOpen(true)
+            setAlertMessage(error.response.data.error)
+            setTableShow(false)
+            setRows([])
+            setColumns([])
+            console.error("Error fetching batch-wise data:", error);
+        } finally {
+            setLoading(false)
+        }
+    };
+
+    const getUserWiseList = async () => {
+        setLoading(true)
+        try {
+            const response = await axios.get(
+                `${baseURL}api/getCorpCourseUsers?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`,
+                { headers: { Authorization: `Bearer ${token}` } }
+            );
+
+            if (response.status === 200) {
+                setRows(response.data.users)
+                setColumns(userListColumns)
+                setTableShow(true)
+                setUserSelect(true)
+            }
+            console.log(response.data, "User Wise");
+        } catch (error) {
+            setAlertOpen(true)
+            setAlertMessage(error.response.data.error)
+            setTableShow(false)
+            setRows([])
+            setColumns([])
+            console.error("Error fetching batch-wise data:", error);
+        } finally {
+            setLoading(false)
+        }
+    };
+
+    const handleRowSelection = (newSelection) => {
+        setSelectedUserList(newSelection);
+    };
+
+    const handleDownloadBatchReport = async (item) => {
+        setLoading(true)
+        try {
+            let url;
+            url = `${baseURL}api/downloadCourseAndBatchWiseReport?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}&batchId=${item.id}`
+
+            const response = await axios.post(url, {}, {
+                responseType: 'blob',
+                headers: {
+                    Authorization: `Bearer ${token}`
+                }
+            });
+            const text = await response.data.text();
+            if (text.includes('Course not configured')) {
+                setAlertMessage('Course not configured.');
+                setAlertOpen(true);
+            } else {
+                const filename = `${item.batchName}_Batch_Report.xlsx`;
+                const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                const blobUrl = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                link.setAttribute('download', filename);
+                document.body.appendChild(link);
+                link.click();
+                link.parentNode.removeChild(link);
+                URL.revokeObjectURL(blobUrl);
+            }
+        } catch (error) {
+            setAlertOpen(true)
+            setAlertMessage(error.response.data.error)
+            console.error('Error downloading course report:', error);
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleDownloadSingleUserReport = async (item) => {
+        setLoading(true)
+        try {
+            let url;
+            url = `${baseURL}api/downloadExamPackReportByCourse?userId=${item.id}&corpCourseId=${selectedCourse.id}&subjectId=${selectedSubject.subjectId}`
+
+            const response = await axios.get(url, {
+                responseType: 'blob',
+                headers: {
+                    Authorization: `Bearer ${token}`
+                }
+            });
+            const text = await response.data.text();
+            if (text.includes('Course not configured')) {
+                setAlertMessage('Course not configured.');
+                setAlertOpen(true);
+            } else {
+                const filename = `${item.userName}_Pack_Report.xlsx`;
+                const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                const blobUrl = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                link.setAttribute('download', filename);
+                document.body.appendChild(link);
+                link.click();
+                link.parentNode.removeChild(link);
+                URL.revokeObjectURL(blobUrl);
+            }
+        } catch (error) {
+            setAlertOpen(true)
+            setAlertMessage(error.response.data.error)
+            console.error('Error downloading course report:', error);
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleSummeryDownload = async () => {
+        setMultiLoading(true)
+        const selectedRowIds = rows
+            .filter(row => selectedUserList.includes(row.id))
+            .map(row => row.id);
+        try {
+            let url;
+            url = `${baseURL}api/downloadExamPacksAndUserIdsReport?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`
+            const response = await axios.post(url, {
+                userIds: selectedRowIds,
+            }, {
+                responseType: 'blob',
+                headers: {
+                    Authorization: `Bearer ${token}`
+                }
+            });
+            const text = await response.data.text();
+            if (text.includes('Course not configured')) {
+                setAlertMessage('Course not configured.');
+                setAlertOpen(true);
+            } else {
+                const filename = 'User_Exam_Pack_Report.xlsx';
+                const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                const blobUrl = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                link.setAttribute('download', filename);
+                document.body.appendChild(link);
+                link.click();
+                link.parentNode.removeChild(link);
+                URL.revokeObjectURL(blobUrl);
+            }
+        } catch (error) {
+            setAlertOpen(true)
+            setAlertMessage(error.response.data.error)
+            console.error('Error downloading course report:', error);
+        } finally {
+            setMultiLoading(false)
+        }
+    }
+
+    const paginationModel = { page: 0, pageSize: 5 };
+
+    return (
+        <div>
+            <Header />
+            <Sidebar />
+            <div style={{ padding: "100px 0px 0px 100px", marginLeft: "140px" }}>
+                <Box sx={{ maxWidth: 800, mx: 'auto', my: 4, p: 3, backgroundColor: '#f5f5f5', borderRadius: 2 }}>
+                    <Paper elevation={6} sx={{ p: 5, textAlign: 'center', backgroundColor: '#fff' }}>
+                        <Typography variant="h4" component="h1" gutterBottom sx={{ color: '#3f51b5', marginBottom: "20px" }}>
+                            Exam Pack Report
+                        </Typography>
+                        <Grid container spacing={2} justifyContent="center">
+                            <Grid item xs={12} sm={4}>
+                                <FormControl fullWidth>
+                                    <Autocomplete
+                                        id="ddlSubject"
+                                        options={subjects}
+                                        getOptionLabel={(option) => option.subjectName}
+                                        value={selectedSubject}
+                                        onChange={handleSubjectChange}
+                                        renderInput={(params) => <TextField {...params} label="Subject" />}
+                                    />
+                                </FormControl>
+                            </Grid>
+
+                            <Grid item xs={12} sm={4}>
+                                <FormControl fullWidth>
+                                    <Autocomplete
+                                        id="ddlCourse"
+                                        options={courses}
+                                        getOptionLabel={(option) => option.courseName}
+                                        value={selectedCourse}
+                                        onChange={handleCourseChange}
+                                        renderInput={(params) => <TextField {...params} label="Course" />}
+                                    />
+                                </FormControl>
+                            </Grid>
+
+                            <Grid item xs={12} sm={4}>
+                                <FormControl fullWidth>
+                                    <Autocomplete
+                                        id="checkboxes-tags-demo"
+                                        options={reportType}
+                                        getOptionLabel={(option) => option.label}
+                                        value={selectedReportType}
+                                        onChange={handleReportTypeChange}
+                                        renderInput={(params) => (
+                                            <TextField {...params} label="Report Type" />
+                                        )}
+                                    />
+                                </FormControl>
+                            </Grid>
+
+
+                        </Grid>
+
+                        {tableShow &&
+                            <>
+                                <Box sx={{ display: "flex", justifyContent: "flex-end", width: "100%", margin: "20px 0px" }}>
+                                    {userSelect &&
+                                        <Button
+                                            variant="contained"
+                                            color="primary"
+                                            onClick={handleSummeryDownload}
+                                            disabled={selectedUserList.length <= 1}
+                                            sx={{ width: 'auto', backgroundColor: '#3f51b5', '&:hover': { backgroundColor: '#303f9f' } }}
+                                        >
+                                            {multiLoading ? 'Downloading...' : 'Download Report'}
+                                        </Button>
+                                    }
+                                </Box>
+
+                                <Paper sx={{ width: '100%' }}>
+                                    <div style={{ display: "flex", justifyContent: "end", alignItems: "center", height: "100%", padding: "10px 5px" }}>
+                                        {userSelect && (
+                                            <TextField
+                                                label="Search"
+                                                variant="outlined"
+                                                size="small"
+                                                sx={{ mb: 2 }}
+                                                value={searchQuery}
+                                                onChange={(e) => setSearchQuery(e.target.value)}
+                                                InputProps={{
+                                                    endAdornment: (
+                                                        <InputAdornment position="start">
+                                                            <SearchOutlinedIcon />
+                                                        </InputAdornment>
+                                                    ),
+                                                }}
+                                            />
+                                        )}
+                                    </div>
+                                    <DataGrid
+                                        key={tableKey}
+                                        rows={userSelect ? filteredRows : rows}
+                                        columns={columns}
+                                        initialState={{ pagination: { paginationModel } }}
+                                        pageSizeOptions={[5, 10, 50, 100]}
+                                        checkboxSelection={userSelect}
+                                        disableRowSelectionOnClick
+                                        onRowSelectionModelChange={handleRowSelection}
+                                        sx={{
+                                            border: 0,
+                                            "& .MuiTablePagination-selectLabel": {
+                                                margin: "unset"
+                                            },
+                                            "& .MuiTablePagination-displayedRows": {
+                                                margin: "unset"
+                                            }
+                                        }}
+                                    />
+                                </Paper>
+
+                            </>
+                        }
+                    </Paper>
+                </Box>
+
+                <Snackbar
+                    open={alertOpen}
+                    autoHideDuration={6000}
+                    onClose={() => setAlertOpen(false)}
+                    anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+                >
+                    <Alert onClose={() => setAlertOpen(false)} severity="info" sx={{ width: '100%' }}>
+                        {alertMessage}
+                    </Alert>
+                </Snackbar>
+
+                <Backdrop
+                    sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
+                    open={loading || multiLoading}
+                >
+                    <CircularProgress color="inherit" />
+                </Backdrop>
+            </div>
+        </div>
+    );
+}
+
+export default ExamPackReport;