icleafreportui 0.1.0

package/src/Reports/ExamReport.js

@@ -0,0 +1,269 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, Checkbox, FormControlLabel } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import Header from '../components/Header';
+import Sidebar from '../components/sidebar';
+import '../App.css';
+
+function ExamReport() {
+  const [token, setToken] = useState(localStorage.getItem("token"));
+  const navigate = useNavigate();
+  const [subjects, setSubjects] = useState([]);
+  const [examPacks, setExamPacks] = useState([]);
+  const [exams, setExams] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [selectedSubject, setSelectedSubject] = useState(null);
+  const [selectedExamPack, setSelectedExamPack] = useState(null);
+  const [selectedExam, setSelectedExam] = useState(null);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [openAlert, setOpenAlert] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const baseURL = process.env.REACT_APP_BASE_URL;
+
+  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 fetchExamPacks = async (subjectId) => {
+    try {
+      const response = await axios({
+        method: "get",
+        params: { subjectId },
+        url: `${baseURL}api/getAllExamPacks`,
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setExamPacks(response.data);
+    } catch (error) {
+      console.error('Error fetching exam packs:', error);
+    }
+  };
+
+  const fetchExams = async (examPackId) => {
+    try {
+      const response = await axios({
+        method: "get",
+        params: { examPackId },
+        url: `${baseURL}api/getAllExams`,
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setExams(response.data);
+    } catch (error) {
+      console.error('Error fetching exams:', error);
+    }
+  };
+
+  const fetchUsers = async (examId) => {
+    try {
+      const response = await axios({
+        method: "get",
+        params: { examId },
+        url: `${baseURL}api/getAllUsers`,
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setUsers(response.data);
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    }
+  };
+
+  const handleSubjectChange = (event, newValue) => {
+    setSelectedSubject(newValue);
+    setSelectedExamPack(null);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExamPacks([]);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExamPacks(newValue.subjectId);
+    }
+  };
+
+  const handleExamPackChange = (event, newValue) => {
+    setSelectedExamPack(newValue);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExams(newValue.id);
+    }
+  };
+
+  const handleExamChange = (event, newValue) => {
+    setSelectedExam(newValue);
+    setSelectedUser(null);
+    setUsers([]);
+    if (newValue) {
+      fetchUsers(newValue.id);
+    }
+  };
+
+  const handleUserChange = (event, newValue) => {
+    setSelectedUser(newValue);
+  };
+
+  const handleDownload = async () => {
+    setLoading(true);
+    try {
+      const url = `${baseURL}api/generateReportForExam?subjectId=${selectedSubject.subjectId}&examPackId=${selectedExamPack.id}&examId=${selectedExam.id}`;
+      const response = await axios.get(url, {
+        responseType: 'blob',
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      });
+
+      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', 'QuestionewiseExamReport.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Error downloading report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 Questions Report
+            </Typography>
+            <Grid container spacing={2} justifyContent="center">
+              <Grid item xs={12} sm={6}>
+                <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={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlExamPack"
+                    options={examPacks}
+                    getOptionLabel={(option) => option.name}
+                    value={selectedExamPack}
+                    onChange={handleExamPackChange}
+                    renderInput={(params) => <TextField {...params} label="Exam Pack" />}
+                  />
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlExam"
+                    options={exams}
+                    getOptionLabel={(option) => option.examName}
+                    value={selectedExam}
+                    onChange={handleExamChange}
+                    renderInput={(params) => <TextField {...params} label="Exam" />}
+                  />
+                </FormControl>
+              </Grid>
+
+              {/* <Grid item xs={12} sm={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlUser"
+                    options={users}
+                    getOptionLabel={(option) => option.userName}
+                    value={selectedUser}
+                    onChange={handleUserChange}
+                    renderInput={(params) => <TextField {...params} label="User" />}
+                  />
+                </FormControl>
+              </Grid> */}
+            </Grid>
+
+            <Box sx={{ mt: 3, position: 'relative' }}>
+              {/* <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={onlyWrongAnswers}
+                    onChange={(e) => setOnlyWrongAnswers(e.target.checked)}
+                  />
+                }
+                label="Only Wrong Answers"
+              /> */}
+              <Box sx={{ mt: 2, position: 'relative' }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleDownload}
+                  disabled={!selectedSubject || !selectedExamPack || !selectedExam || loading}
+                  sx={{ width: 'auto', backgroundColor: '#3f51b5', '&:hover': { backgroundColor: '#303f9f' } }}
+                >
+                  {loading ? 'Downloading...' : 'Download Report'}
+                </Button>
+                {loading && (
+                  <CircularProgress
+                    size={24}
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      marginTop: '-12px',
+                      marginLeft: '-12px',
+                    }}
+                  />
+                )}
+              </Box>
+            </Box>
+          </Paper>
+        </Box>
+
+        <Snackbar
+          open={openAlert}
+          autoHideDuration={6000}
+          onClose={() => setOpenAlert(false)}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+          <Alert onClose={() => setOpenAlert(false)} severity="info" sx={{ width: '100%' }}>
+            {alertMessage}
+          </Alert>
+        </Snackbar>
+      </div>
+    </div>
+  );
+}
+
+export default ExamReport;

package/src/Reports/Report.js

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, Checkbox, FormControlLabel } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import Header from '../components/Header';
+import Sidebar from '../components/sidebar';
+import { useTenant } from '../context/TenantProvider';  // ADD THIS
+import '../App.css';
+
+function Report() {
+  const { apiClient } = useTenant();  // ADD THIS - gets API client with token
+  const navigate = useNavigate();
+  const [subjects, setSubjects] = useState([]);
+  const [examPacks, setExamPacks] = useState([]);
+  const [exams, setExams] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [selectedSubject, setSelectedSubject] = useState(null);
+  const [selectedExamPack, setSelectedExamPack] = useState(null);
+  const [selectedExam, setSelectedExam] = useState(null);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [openAlert, setOpenAlert] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [onlyWrongAnswers, setOnlyWrongAnswers] = useState(false);
+
+  const baseURL = process.env.REACT_APP_BASE_URL;
+
+  useEffect(() => {
+    // REMOVE token check - no more JWT
+    fetchAllSubjects();
+  }, []);
+
+  const fetchAllSubjects = async () => {
+    try {
+      // OLD WAY with axios and JWT
+      // const response = await axios({
+      //   method: "get",
+      //   url: `${baseURL}api/showAllSubjects`,
+      //   headers: { Authorization: `Bearer ${token}` },
+      // });
+      
+      // NEW WAY with apiClient
+      const data = await apiClient.get('/api/showAllSubjects');
+      setSubjects(data);
+    } catch (error) {
+      console.error('Error fetching subjects:', error);
+    }
+  };
+
+  const fetchExamPacks = async (subjectId) => {
+    try {
+      // OLD WAY
+      // const response = await axios({
+      //   method: "get",
+      //   params: { subjectId },
+      //   url: `${baseURL}api/getAllExamPacks`,
+      //   headers: { Authorization: `Bearer ${token}` },
+      // });
+      
+      // NEW WAY
+      const data = await apiClient.get(`/api/getAllExamPacks?subjectId=${subjectId}`);
+      setExamPacks(data);
+    } catch (error) {
+      console.error('Error fetching exam packs:', error);
+    }
+  };
+
+  const fetchExams = async (examPackId) => {
+    try {
+      const data = await apiClient.get(`/api/getAllExams?examPackId=${examPackId}`);
+      setExams(data);
+    } catch (error) {
+      console.error('Error fetching exams:', error);
+    }
+  };
+
+  const fetchUsers = async (examId) => {
+    try {
+      const data = await apiClient.get(`/api/getAllUsers?examId=${examId}`);
+      setUsers(data);
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    }
+  };
+
+  const handleSubjectChange = (event, newValue) => {
+    setSelectedSubject(newValue);
+    setSelectedExamPack(null);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExamPacks([]);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExamPacks(newValue.subjectId);
+    }
+  };
+
+  const handleExamPackChange = (event, newValue) => {
+    setSelectedExamPack(newValue);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExams(newValue.id);
+    }
+  };
+
+  const handleExamChange = (event, newValue) => {
+    setSelectedExam(newValue);
+    setSelectedUser(null);
+    setUsers([]);
+    if (newValue) {
+      fetchUsers(newValue.id);
+    }
+  };
+
+  const handleUserChange = (event, newValue) => {
+    setSelectedUser(newValue);
+  };
+
+  const handleDownload = async () => {
+    setLoading(true);
+    try {
+      // OLD WAY with axios
+      // const url = `${baseURL}api/generateReportForSingleUser?subjectId=${selectedSubject.subjectId}&examPackId=${selectedExamPack.id}&examId=${selectedExam.id}&userId=${selectedUser.id}&wrongAnswerFlag=${onlyWrongAnswers}`;
+      // const response = await axios.get(url, {
+      //   responseType: 'blob',
+      //   headers: { Authorization: `Bearer ${token}` }
+      // });
+      
+      // NEW WAY - need blob response
+      const response = await fetch(`${baseURL}api/generateReportForSingleUser?subjectId=${selectedSubject.subjectId}&examPackId=${selectedExamPack.id}&examId=${selectedExam.id}&userId=${selectedUser.id}&wrongAnswerFlag=${onlyWrongAnswers}`, {
+        headers: {
+          'X-Tenant-Token': apiClient.tenantToken
+        }
+      });
+      
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.setAttribute('download', 'Report.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Error downloading report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 Report
+            </Typography>
+            <Grid container spacing={2} justifyContent="center">
+              <Grid item xs={12} sm={6}>
+                <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={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlExamPack"
+                    options={examPacks}
+                    getOptionLabel={(option) => option.name}
+                    value={selectedExamPack}
+                    onChange={handleExamPackChange}
+                    renderInput={(params) => <TextField {...params} label="Exam Pack" />}
+                  />
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlExam"
+                    options={exams}
+                    getOptionLabel={(option) => option.examName}
+                    value={selectedExam}
+                    onChange={handleExamChange}
+                    renderInput={(params) => <TextField {...params} label="Exam" />}
+                  />
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    id="ddlUser"
+                    options={users}
+                    getOptionLabel={(option) => option.userName}
+                    value={selectedUser}
+                    onChange={handleUserChange}
+                    renderInput={(params) => <TextField {...params} label="User" />}
+                  />
+                </FormControl>
+              </Grid>
+            </Grid>
+
+            <Box sx={{ mt: 3, position: 'relative' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={onlyWrongAnswers}
+                    onChange={(e) => setOnlyWrongAnswers(e.target.checked)}
+                  />
+                }
+                label="Only Wrong Answers"
+              />
+              <Box sx={{ mt: 2, position: 'relative' }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleDownload}
+                  disabled={!selectedSubject || !selectedExamPack || !selectedExam || !selectedUser || loading}
+                  sx={{ width: 'auto', backgroundColor: '#3f51b5', '&:hover': { backgroundColor: '#303f9f' } }}
+                >
+                  {loading ? 'Downloading...' : 'Download Report'}
+                </Button>
+                {loading && (
+                  <CircularProgress
+                    size={24}
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      marginTop: '-12px',
+                      marginLeft: '-12px',
+                    }}
+                  />
+                )}
+              </Box>
+            </Box>
+          </Paper>
+        </Box>
+
+        <Snackbar
+          open={openAlert}
+          autoHideDuration={6000}
+          onClose={() => setOpenAlert(false)}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+          <Alert onClose={() => setOpenAlert(false)} severity="info" sx={{ width: '100%' }}>
+            {alertMessage}
+          </Alert>
+        </Snackbar>
+      </div>
+    </div>
+  );
+}
+
+export default Report;

package/src/api/client.jsx

@@ -0,0 +1,42 @@
+class TenantApiClient {
+    constructor(config) {
+        this.baseURL = config.baseURL;
+        this.tenantToken = config.tenantToken;
+    }
+
+    async request(endpoint, options = {}) {
+    // Remove double slashes
+    const cleanEndpoint = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint;
+    const url = `${this.baseURL}/${cleanEndpoint}`;
+        console.log('FULL URL BEING SENT:', url);  // Add this
+
+    const response = await fetch(url, {
+        ...options,
+        headers: {
+            'X-Tenant-Token': this.tenantToken,
+            'Content-Type': 'application/json',
+            ...options.headers
+        }
+    });
+
+    if (response.status === 401) {
+        throw new Error('Invalid or missing tenant token');
+    }
+
+    return response.json();
+}
+
+    // Add your API methods
+    async get(endpoint) {
+        return this.request(endpoint);
+    }
+
+    async post(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(data)
+        });
+    }
+}
+
+export default TenantApiClient;