bug fixes

README.md

@@ -1,70 +1,63 @@
-# Getting Started with Create React App
+# React Admin Teacher Dashboard
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-## Available Scripts
+The Student-Teacher Admin Dashboard is a robust web application built with React, Redux, and Material-UI (MUI). It serves as a comprehensive solution for managing classes from 1 to 10 in a school, providing distinct levels of access for administrators, teachers, and students.
 
-In the project directory, you can run:
+## Key Features
 
-### `npm start`
+The React Admin Teacher Dashboard includes the following features:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+1. **Role-based Access Control:** The dashboard supports three roles: student, teacher, and admin. Each role has specific permissions and access levels within the system.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+2. **Student Management:** The dashboard allows teachers to manage student profiles, including creating, editing, and deleting student information. Teachers can view and update student grades, attendance, and other relevant details.
 
-### `npm test`
+3. **Teacher Management:** Administrators have the ability to manage teacher profiles, including adding, modifying, and removing teachers from the system.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+4. **Course Management:** The dashboard enables administrators to manage whole academic data of the institution. They can create and assign teachers for various classes and teachers can enroll students and manage course materials, assignments, projects,library dues and grades etc.
 
-### `npm run build`
+5. **Attendance Tracking:** Teachers can mark student attendance and keep and view record of attendance history for over a month. They have access to attendance reports.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+6. **Academic Tracking:** Teachers can track the academic progress of class and can assess the graduation status of students.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Installation
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+To set up the React Admin Teacher Dashboard, follow these steps:
 
-### `npm run eject`
+1. Clone the repository
+2. Navigate to the project directory
+3. Install dependencies: `npm install`
+4. Start the development server: `npm start`
+5. Open your browser and access the dashboard at `http://localhost:3000`
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+Note: Ensure that you have Node.js and npm installed on your machine before proceeding with the installation.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Usage
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+1. Launch the React Admin Teacher Dashboard by following the installation steps mentioned above.
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+2. On the login screen, enter your credentials based on your assigned role (student, teacher, or admin).
 
-## Learn More
+3. Explore the various features and functionalities available in the dashboard based on your role and permissions.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+4. Perform administrative tasks such as managing students, teachers, courses, and attendance as needed.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
 
-### Code Splitting
+## Contributing
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+Contributions to the React Admin Teacher Dashboard are welcome. If you find any issues or have suggestions for improvements, please submit them through the project's issue tracker on GitHub.
 
-### Analyzing the Bundle Size
+Before making any significant changes, please discuss them with the project maintainers to ensure alignment with the project's goals and direction.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+## License
 
-### Making a Progressive Web App
+The React Admin Teacher Dashboard is open-source software licensed under the [MIT license](LICENSE).
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+## Acknowledgments
 
-### Advanced Configuration
+This project was inspired by the need for an efficient and user-friendly administration tool for teachers and educational institutions.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+I express my sincere gratitude to all the npm package makers whose contributions have been invaluable in the development of this application. Their dedication and hard work in creating and maintaining these packages have significantly enhanced the functionality and efficiency of the app.
 
-### Deployment
+I extend my appreciation to the entire open-source community for their continuous efforts in building and sharing high-quality software. The collaboration and support within the community have been instrumental in the success of this project.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

src/Components/Layouts/DrawerWidth.js

@@ -1,3 +1,3 @@
 // widths.js
-export const drawerWidth = 120;
+export const drawerWidth = 140;
 export const fullDrawerWidth = 210;

src/Features/Auth/persistLogin.js

@@ -31,7 +31,7 @@ const PersistLogin = () => {
       if (!token && persist) verifyRefreshToken();
     }
     return () => (effectRan.current = true);
-  }, []);
+  }, [persist, refresh, token]);
 
   let content;
   if (!persist) {

src/Features/Student/StudentDashboard.js

@@ -6,8 +6,6 @@ import { useGetStudentDataQuery } from './studentApiSlice';
 import Loading from '../../Components/Loading';
 import Error from '../../Components/Error';
 import { SummaryBox } from '../../Components/Boxes/SummaryBox';
-import { AttendanceCharts } from '../../Components/Boxes/AttendanceCharts';
-import { ResultsChart } from '../../Components/Boxes/ResultsChart';
 import { Timetable } from './Timetable';
 
 const StudentDashboard = () => {
@@ -18,8 +16,7 @@ const StudentDashboard = () => {
     useGetStudentDataQuery(classId);
 
   // Filtering Data from API response
-  const { miscellaneousInfo, attendance, results, studentInfo } = data || {};
-  const totalStudents = studentInfo?.length;
+  const { miscellaneousInfo } = data || {};
 
   let content;
 
@@ -31,8 +28,6 @@ const StudentDashboard = () => {
     content = (
       <Box sx={{ mt: 2 }}>
         <SummaryBox data={miscellaneousInfo} />
-        <AttendanceCharts data={attendance} />
-        <ResultsChart data={results} students={totalStudents} />
         <Timetable />
       </Box>
     );

src/Features/Teachers/Calendar/TeacherCalendar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -19,9 +19,6 @@ import Loading from '../../../Components/Loading';
 // Teacher Calendar component
 // Renders the calendar based on the classId
 export const TeacherCalendar = (events) => {
-  // Hook for setting events
-  const [event, setEvent] = useState([]);
-
   const { classId } = useParams(); // Retrieve classId from the URL parameters
 
   // Mutation hook for add Events
@@ -118,7 +115,6 @@ export const TeacherCalendar = (events) => {
               dayMaxEvents={true}
               select={handleDateClick}
               eventClick={handleEventClick}
-              eventsSet={(event) => setEvent(event)}
             />
           </Box>
         </Box>

src/Features/Teachers/StudentInfo/ViewStudents.js

@@ -11,6 +11,7 @@ import { setSearchTerm } from '../../Search/Searchslice';
 import { CustomNoRowsOverlay } from '../../../Components/NoRowsOverlay';
 import { UpdateStudent } from './UpdateStudent';
 import { useDeleteStudentMutation } from '../teachersApiSlice';
+import Loading from '../../../Components/Loading';
 
 export const ViewStudents = ({ data }) => {
   const { classId } = useParams(); // Retrieve classId from the URL parameters
@@ -118,52 +119,57 @@ export const ViewStudents = ({ data }) => {
 
   return (
     <Box sx={{ height: 760, width: '100%', marginTop: '20px' }}>
-      <DataGrid
-        style={{ padding: '20px' }}
-        rows={filteredData}
-        columns={columns}
-        pageSizeOptions={[10]}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 10,
-            },
-          },
-        }}
-        localeText={{
-          toolbarDensity: 'Size',
-          toolbarDensityLabel: 'Size',
-          toolbarDensityCompact: 'Small',
-          toolbarDensityStandard: 'Medium',
-          toolbarDensityComfortable: 'Large',
-        }}
-        components={{
-          Toolbar: GridToolbar,
-        }}
-        // To style the toolbar of MUI
-        componentsProps={{
-          panel: {
-            sx: {
-              '& .MuiDataGrid-filterForm': {
-                position: 'absolute',
-                top: '-100px',
-                backgroundColor: '#F8F8F8',
+      <ToastContainer />
+      {isLoading ? (
+        <Loading open={isLoading} />
+      ) : (
+        <>
+          <DataGrid
+            style={{ padding: '20px' }}
+            rows={filteredData}
+            columns={columns}
+            pageSizeOptions={[10]}
+            initialState={{
+              pagination: {
+                paginationModel: {
+                  pageSize: 10,
+                },
               },
-            },
-          },
-        }}
-        autoHeight
-        disableSelectionOnClick
-        slots={{
-          noRowsOverlay: CustomNoRowsOverlay,
-        }}
-      />
-      {/* ------------ Form for Updating ---------- */}
-      <Dialog open={editDialogOpen} onClose={handleSaveEdit}>
-        <DialogContent>
-          <UpdateStudent data={editedItem} id={selectedItemId} />
-        </DialogContent>
-      </Dialog>
+            }}
+            localeText={{
+              toolbarDensity: 'Size',
+              toolbarDensityLabel: 'Size',
+              toolbarDensityCompact: 'Small',
+              toolbarDensityStandard: 'Medium',
+              toolbarDensityComfortable: 'Large',
+            }}
+            autoHeight
+            disableSelectionOnClick
+            slots={{
+              noRowsOverlay: CustomNoRowsOverlay,
+              toolbar: GridToolbar,
+            }}
+            // To style the toolbar of MUI
+            slotProps={{
+              panel: {
+                sx: {
+                  '& .MuiDataGrid-filterForm': {
+                    position: 'absolute',
+                    top: '-100px',
+                    backgroundColor: '#F8F8F8',
+                  },
+                },
+              },
+            }}
+          />
+          {/* ------------ Form for Updating ---------- */}
+          <Dialog open={editDialogOpen} onClose={handleSaveEdit}>
+            <DialogContent>
+              <UpdateStudent data={editedItem} id={selectedItemId} />
+            </DialogContent>
+          </Dialog>
+        </>
+      )}
     </Box>
   );
 };