icleafreportui 0.2.5 → 0.2.7

package/dist/Reports/ImportContent/ExamPackReportContent.js

@@ -0,0 +1,522 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, InputAdornment } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import Backdrop from '@mui/material/Backdrop';
+import { useTenant } from '../context/TenantProvider';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function ExamPackReportContent() {
+  const {
+    apiClient
+  } = useTenant();
+  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 [tableKey, setTableKey] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const baseURL = apiClient?.baseURL || process.env.REACT_APP_BASE_URL;
+  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('@')) {
+        return email === term;
+      } else {
+        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 => /*#__PURE__*/_jsx("span", {
+      style: {
+        color: params.value ? 'green' : 'red',
+        fontWeight: 'bold'
+      },
+      children: params.value ? 'Active' : 'Inactive'
+    })
+  }, {
+    field: 'dailyProgressMail',
+    headerName: 'Daily Progress Mail',
+    width: 130,
+    renderCell: params => /*#__PURE__*/_jsx("span", {
+      style: {
+        color: params.value ? 'green' : 'red',
+        fontWeight: 'bold'
+      },
+      children: params.value ? 'Active' : 'Inactive'
+    })
+  }, {
+    field: "report",
+    headerName: "Report",
+    sortable: false,
+    width: 70,
+    renderCell: params => /*#__PURE__*/_jsx(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 => /*#__PURE__*/_jsx("span", {
+      style: {
+        color: params.value ? 'green' : 'red',
+        fontWeight: 'bold'
+      },
+      children: params.value ? 'User' : ''
+    })
+  }, {
+    field: "report",
+    headerName: "Report",
+    sortable: false,
+    width: 70,
+    renderCell: params => /*#__PURE__*/_jsx(FileDownloadOutlinedIcon, {
+      onClick: () => handleDownloadSingleUserReport(params.row),
+      fontSize: "small",
+      style: {
+        cursor: "pointer"
+      }
+    })
+  }];
+  useEffect(() => {
+    fetchAllSubjects();
+  }, []);
+  const fetchAllSubjects = async () => {
+    try {
+      const data = await apiClient.get('/api/showAllSubjects');
+      setSubjects(data);
+    } catch (error) {
+      console.error('Error fetching subjects:', error);
+    }
+  };
+  const fetchCourses = async subjectId => {
+    try {
+      const data = await apiClient.get(`/api/getCoursesBySubject?subjectId=${subjectId}`);
+      setCourses(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, reportTypeValue) => {
+    if (!selectedSubject?.subjectId || !courseId) return;
+    const apiMap = {
+      "Batch Wise": getBatchWiseList,
+      "User Wise": getUserWiseList
+    };
+    apiMap[reportTypeValue]?.(courseId);
+  };
+  const getBatchWiseList = async () => {
+    setLoading(true);
+    try {
+      const data = await apiClient.get(`/api/getCorpCourseBatches?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`);
+      if (data) {
+        setUserSelect(false);
+        setRows(data.corpCourseBatches || []);
+        setColumns(batchListColumns);
+        setTableShow(true);
+      }
+    } catch (error) {
+      setAlertOpen(true);
+      setAlertMessage(error.response?.data?.error || 'Error fetching batch data');
+      setTableShow(false);
+      setRows([]);
+      setColumns([]);
+      console.error("Error fetching batch-wise data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const getUserWiseList = async () => {
+    setLoading(true);
+    try {
+      const data = await apiClient.get(`/api/getCorpCourseUsers?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`);
+      if (data) {
+        setRows(data.users || []);
+        setColumns(userListColumns);
+        setTableShow(true);
+        setUserSelect(true);
+      }
+    } catch (error) {
+      setAlertOpen(true);
+      setAlertMessage(error.response?.data?.error || 'Error fetching user data');
+      setTableShow(false);
+      setRows([]);
+      setColumns([]);
+      console.error("Error fetching user-wise data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleRowSelection = newSelection => {
+    setSelectedUserList(newSelection);
+  };
+  const handleDownloadBatchReport = async item => {
+    setLoading(true);
+    try {
+      const blob = await apiClient.download(`/api/downloadCourseAndBatchWiseReport`, {
+        subjectId: selectedSubject.subjectId,
+        corpCourseId: selectedCourse.id,
+        batchId: item.id
+      });
+      const text = await blob.text();
+      if (text.includes('Course not configured')) {
+        setAlertMessage('Course not configured.');
+        setAlertOpen(true);
+      } else {
+        const filename = `${item.batchName}_Batch_Report.xlsx`;
+        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 || 'Error downloading report');
+      console.error('Error downloading batch report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDownloadSingleUserReport = async item => {
+    setLoading(true);
+    try {
+      const blob = await apiClient.download(`/api/downloadExamPackReportByCourse`, {
+        userId: item.id,
+        corpCourseId: selectedCourse.id,
+        subjectId: selectedSubject.subjectId
+      });
+      const text = await blob.text();
+      if (text.includes('Course not configured')) {
+        setAlertMessage('Course not configured.');
+        setAlertOpen(true);
+      } else {
+        const filename = `${item.userName}_Pack_Report.xlsx`;
+        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 || 'Error downloading report');
+      console.error('Error downloading user report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSummaryDownload = async () => {
+    setMultiLoading(true);
+    const selectedRowIds = rows.filter(row => selectedUserList.includes(row.id)).map(row => row.id);
+    try {
+      const response = await fetch(`${baseURL}/api/downloadExamPacksAndUserIdsReport?subjectId=${selectedSubject.subjectId}&corpCourseId=${selectedCourse.id}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-Token': apiClient.tenantToken
+        },
+        body: JSON.stringify({
+          userIds: selectedRowIds
+        })
+      });
+      const blob = await response.blob();
+      const text = await blob.text();
+      if (text.includes('Course not configured')) {
+        setAlertMessage('Course not configured.');
+        setAlertOpen(true);
+      } else {
+        const filename = 'User_Exam_Pack_Report.xlsx';
+        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 || 'Error downloading report');
+      console.error('Error downloading summary report:', error);
+    } finally {
+      setMultiLoading(false);
+    }
+  };
+
+  // Add download method to apiClient if not exists
+  const download = async function (endpoint) {
+    let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const query = new URLSearchParams(params).toString();
+    const url = `${endpoint}?${query}`;
+    const response = await fetch(`${baseURL}/${url}`, {
+      headers: {
+        'X-Tenant-Token': apiClient.tenantToken
+      }
+    });
+    return response.blob();
+  };
+
+  // Add download method to apiClient
+  if (apiClient && !apiClient.download) {
+    apiClient.download = download;
+  }
+  const paginationModel = {
+    page: 0,
+    pageSize: 5
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      maxWidth: 1000,
+      mx: 'auto',
+      my: 4,
+      p: 3,
+      backgroundColor: '#f5f5f5',
+      borderRadius: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Paper, {
+      elevation: 6,
+      sx: {
+        p: 5,
+        textAlign: 'center',
+        backgroundColor: '#fff'
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        component: "h1",
+        gutterBottom: true,
+        sx: {
+          color: '#3f51b5',
+          marginBottom: "20px"
+        },
+        children: "Exam Pack Report"
+      }), /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 4,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              options: subjects,
+              getOptionLabel: option => option.subjectName,
+              value: selectedSubject,
+              onChange: handleSubjectChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Subject"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 4,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              options: courses,
+              getOptionLabel: option => option.courseName,
+              value: selectedCourse,
+              onChange: handleCourseChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Course"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 4,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              options: reportType,
+              getOptionLabel: option => option.label,
+              value: selectedReportType,
+              onChange: handleReportTypeChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Report Type"
+              })
+            })
+          })
+        })]
+      }), tableShow && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "flex-end",
+            width: "100%",
+            margin: "20px 0px"
+          },
+          children: userSelect && /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            onClick: handleSummaryDownload,
+            disabled: selectedUserList.length <= 1,
+            sx: {
+              width: 'auto',
+              backgroundColor: '#3f51b5'
+            },
+            children: multiLoading ? 'Downloading...' : 'Download Report'
+          })
+        }), /*#__PURE__*/_jsxs(Paper, {
+          sx: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              display: "flex",
+              justifyContent: "end",
+              alignItems: "center",
+              height: "100%",
+              padding: "10px 5px"
+            },
+            children: userSelect && /*#__PURE__*/_jsx(TextField, {
+              label: "Search",
+              variant: "outlined",
+              size: "small",
+              sx: {
+                mb: 2
+              },
+              value: searchQuery,
+              onChange: e => setSearchQuery(e.target.value),
+              InputProps: {
+                endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                  position: "start",
+                  children: /*#__PURE__*/_jsx(SearchOutlinedIcon, {})
+                })
+              }
+            })
+          }), /*#__PURE__*/_jsx(DataGrid, {
+            rows: userSelect ? filteredRows : rows,
+            columns: columns,
+            initialState: {
+              pagination: {
+                paginationModel
+              }
+            },
+            pageSizeOptions: [5, 10, 50, 100],
+            checkboxSelection: userSelect,
+            disableRowSelectionOnClick: true,
+            onRowSelectionModelChange: handleRowSelection,
+            sx: {
+              border: 0,
+              "& .MuiTablePagination-selectLabel": {
+                margin: "unset"
+              },
+              "& .MuiTablePagination-displayedRows": {
+                margin: "unset"
+              }
+            }
+          }, tableKey)]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Snackbar, {
+      open: alertOpen,
+      autoHideDuration: 6000,
+      onClose: () => setAlertOpen(false),
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Alert, {
+        onClose: () => setAlertOpen(false),
+        severity: "info",
+        children: alertMessage
+      })
+    }), /*#__PURE__*/_jsx(Backdrop, {
+      sx: theme => ({
+        color: '#fff',
+        zIndex: theme.zIndex.drawer + 1
+      }),
+      open: loading || multiLoading,
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        color: "inherit"
+      })
+    })]
+  });
+}
+export default ExamPackReportContent;