+ + + +

+ + + + + + + +

+ + + + {tableRowData.length > 0 && ( + + )} + + + + + + {isLoading && } + + ); +}; +export default AnomolyReassigned; diff --git a/src/Components/AttendenceCorrection.jsx b/src/Components/AttendenceCorrection.jsx new file mode 100644 index 0000000..2d54f95 --- /dev/null +++ b/src/Components/AttendenceCorrection.jsx @@ -0,0 +1,478 @@ +import React, { useState } from "react"; +import { + DesktopOutlined, + FileOutlined, + PieChartOutlined, + TeamOutlined, + UserOutlined, +} from "@ant-design/icons"; +import { Breadcrumb, Layout, Menu, Typography, theme } from "antd"; +import BookletInput from "./BookletInput"; +import { Box, Button } from "@mui/material"; +import { useEffect } from "react"; +import TextField from "@mui/material/TextField"; +import EditButton from "./EditButton"; +import { width } from "@mui/system"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { useSearchParams } from "react-router-dom"; +import LoadingContainer from "./LoadingContainer"; +import HomeIcon from '@mui/icons-material/Home'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import { useNavigate } from "react-router-dom"; +import QueryStatsIcon from '@mui/icons-material/QueryStats'; + + +const { Header, Content, Footer, Sider } = Layout; +function getItem(label, key, icon, children) { + return { + key, + icon, + children, + label, + }; +} +// const items = [ +// getItem('Option 1', '1', ), +// getItem('Option 2', '2', ), +// getItem('User', 'sub1', , [ +// getItem('Tom', '3'), +// getItem('Bill', '4'), +// getItem('Alex', '5'), +// ]), +// getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]), +// getItem('Files', '9', ), +// ]; + +const items = [getItem("Reassigned Booklet No", "1", )]; + +const AttendenceCorrection = () => { + const [collapsed, setCollapsed] = useState(false); + const [bookletInput, setBookletInput] = useState(null); + const [dataFetched, setDataFetched] = useState(false); + const [studentData, setStudentData] = useState(null); + const [updateReassigned, setUpdateReassigned] = useState(false); + const [reasssingedSno, setReassignedSno] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate() + let [searchParams, setSearchParams] = useSearchParams(); + const searchParamsBookletSerialNo = searchParams.get("sno"); + console.log("Serach parmas sno : ", searchParamsBookletSerialNo); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + useEffect(() => { + if (windowWidth < 800) { + setCollapsed(true) + } + if(windowWidth > 800){ + setCollapsed(false) + } + }, [windowWidth]); + + useEffect(() => { + if (searchParamsBookletSerialNo) { + setBookletInput(searchParamsBookletSerialNo); + } + }, [searchParamsBookletSerialNo]); + + useEffect(() => { + submitBookletInput(); + }, [bookletInput]); + + + + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + const submitBookletInput = async () => { + setIsLoading(true); + setStudentData(null); + if (!bookletInput) { + console.log("Returning"); + return; + } + const payload = { + bookletInput, + }; + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchBookletInfo`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }); + const responseData = await response.json(); + console.log("Response Data is : ", responseData); + setDataFetched(true); + setIsLoading(false); + if (responseData.status === "success") { + console.log("Into top if"); + if (!responseData.data) { + setStudentData(null); + } + if (responseData.data) { + setStudentData(responseData.data[0]); + } + } + }; + + const updateReassignedSno = async () => { + const payload = { + bookletInput, + reasssingedSno, + }; + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updateReassingedSno`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }); + const responseData = await response.json(); + if (responseData.status === "success" && responseData?.status_code == 200) { + console.log("Updation success"); + toast.success("Record Updated Successfully !!"); + } else if ( + responseData.status === "success" && + responseData?.status_code == 405 + ) { + console.log("Updation not allowed"); + toast.error("Reassigned Serial No is Invalid !!"); + } + }; + + return ( + + + setCollapsed(value)} + > +

+ + + +

+ + + + + + + + {/* Reassigned Booklet Serial Manual Updation : */} +

+ + {/* + User + Bill + */} + {/*

+ Bill is a cat. +

*/} + + + + + + + {!isLoading && !studentData && ( + +

Invalid Booklet Serial No !!

+ + )} + {dataFetched && studentData && ( + <> + + +

Booklet Info:

+ + + + + Student Name: + + + + + Exam Center Code: + + + + + Exam Centre: + + + + Exam Date: + + + + + Reassigned Serial No: + + + { + setReassignedSno(e.target.value); + }} + /> + + + + + + + + + + )} + + + + + + + {!isLoading && !studentData && ( + +

Invalid Booklet Serial No !!

+ + )} + {dataFetched && studentData && ( + <> + + +

Booklet Info:

+ + + + + Student Name: + + + + + Exam Center Code: + + + + + Exam Centre: + + + + Exam Date: + + + + + Reassigned Serial No: + + + { + setReassignedSno(e.target.value); + }} + /> + + + + + + + + + + )} + + + {dataFetched && studentData && ( +

+ )} + + + {dataFetched && studentData && ( +

+ )} + + + + + + {isLoading && } + + ); +}; +export default AttendenceCorrection; diff --git a/src/Components/BarcodeInput.jsx b/src/Components/BarcodeInput.jsx new file mode 100644 index 0000000..fbc9e4b --- /dev/null +++ b/src/Components/BarcodeInput.jsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; + +const BarcodeInput = ({setBookletInput,setDataFetched,bookletInput}) =>{ + return ( + :not(style)': { m: 1, width: '25ch' }, + // }} + // noValidate + autoComplete="off" + > + { + setBookletInput(e.target.value) + setDataFetched(false) + }}/> + + ); +} + +export default BarcodeInput; \ No newline at end of file diff --git a/src/Components/BookletInput.jsx b/src/Components/BookletInput.jsx new file mode 100644 index 0000000..7a0f6d2 --- /dev/null +++ b/src/Components/BookletInput.jsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; + +const BookletInput = ({setBookletInput,setDataFetched,bookletInput}) =>{ + return ( + :not(style)': { m: 1, width: '25ch' }, + // }} + // noValidate + autoComplete="off" + > + { + setBookletInput(e.target.value) + setDataFetched(false) + }}/> + + ); +} + +export default BookletInput; \ No newline at end of file diff --git a/src/Components/EditButton.jsx b/src/Components/EditButton.jsx new file mode 100644 index 0000000..b1c0b9c --- /dev/null +++ b/src/Components/EditButton.jsx @@ -0,0 +1,9 @@ +import EditIcon from '@mui/icons-material/Edit'; + +const EditButton = () =>{ + return( + + ) +} + +export default EditButton \ No newline at end of file diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx new file mode 100644 index 0000000..c2bc3a0 --- /dev/null +++ b/src/Components/Home.jsx @@ -0,0 +1,37 @@ +import { Box } from "@mui/material"; +import HomepageCard from "./HomepageCard"; + + +const Home = () => { + // const cards = [ + // { + // title: "Reassingned Serial No Anomoly Manual Updation", + // url: "/anomoly/reassigned", + // }, + // { + // title: "Part A OCR Anomoly Manual Updation", + // url: "/anomoly/partA", + // } + // ]; + const cards = [ + { + title: "Reassingned Serial No Anomoly Manual Updation", + url: "/anomoly/reassigned", + }] + return ( + <> + + +

Welcome to exampaper.vidh.ai

+ + + {cards.map((card) => ( + + ))} + + + + ); +}; + +export default Home; diff --git a/src/Components/HomepageCard.jsx b/src/Components/HomepageCard.jsx new file mode 100644 index 0000000..6e4333b --- /dev/null +++ b/src/Components/HomepageCard.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import { Card, Col, Row } from "antd"; +import { useNavigate } from "react-router"; + +const HomepageCard = ({ title, url }) => { + const navigate = useNavigate(); + return ( + { + navigate(url); + }} + > + + + {title} + + + + ); +}; +export default HomepageCard; diff --git a/src/Components/IndividualExamCentreStats.jsx b/src/Components/IndividualExamCentreStats.jsx new file mode 100644 index 0000000..cbab9cd --- /dev/null +++ b/src/Components/IndividualExamCentreStats.jsx @@ -0,0 +1,219 @@ +import React, { useState } from "react"; +import { + DesktopOutlined, + FileOutlined, + PieChartOutlined, + TeamOutlined, + UserOutlined, +} from "@ant-design/icons"; +import { Breadcrumb, Layout, Menu, Typography, theme } from "antd"; +import BookletInput from "./BookletInput"; +import { Box, Button } from "@mui/material"; +import { useEffect } from "react"; +import TextField from "@mui/material/TextField"; +import EditButton from "./EditButton"; +import { width } from "@mui/system"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { TablePagination } from "@mui/base/TablePagination"; +import TableComponent from "./TableComponent"; +import LoadingContainer from "./LoadingContainer"; +import HomeIcon from "@mui/icons-material/Home"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import { useNavigate } from "react-router-dom"; +import QueryStatsIcon from "@mui/icons-material/QueryStats"; +import { useParams } from 'react-router-dom'; + + +const { Header, Content, Footer, Sider } = Layout; +function getItem(label, key, icon, children) { + return { + key, + icon, + children, + label, + }; +} + +const items = [getItem("Reassigned Booklet No", "1", )]; + +const IndividualExamCentreStats = () => { + console.log("BACKEND URL: ", import.meta.env.VITE_REACT_APP_BACKEND_URL); + const [collapsed, setCollapsed] = useState(false); + const [anomolyData, setAnomolyData] = useState([]); + const [tableRowData, setTableRowData] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const { exam_centre_code } = useParams(); + const navigate = useNavigate(); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + useEffect(() => { + if (windowWidth < 800) { + setCollapsed(true) + } + if(windowWidth > 800){ + setCollapsed(false) + } + }, [windowWidth]); + + + function createData( + exam_centre_code, + exam_date, + manual_verification_needed_count, + subject_code, + total_count + ) { + return { + exam_centre_code, + exam_date, + manual_verification_needed_count, + subject_code, + total_count + }; + } + + + const fetchIndividualReassignedStats = () => { + useEffect(() => { + setIsLoading(true); + const payload = { + exam_centre_code, + } + + fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchIndividualReassignedStats`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body:JSON.stringify(payload) + }) + .then((response) => response.json()) + .then((responseData) => { + console.log("Response Data is : ", responseData); + setIsLoading(false); + if (responseData.status === "success") { + setAnomolyData(responseData?.data); + const tmpData = []; + for (var data of responseData?.data) { + // console.log("Student name : ",data?.student_name) + tmpData.push( + createData( + data?.exam_centre_code, + data?.exam_date, + data?.manual_verification_needed_count, + data?.subject_code, + data?.total_count + ) + ); + } + console.log("Tmp data is : ", tmpData); + if (tmpData.length > 0) { + setTableRowData(tmpData); + } + } + }); + }, []); + }; +fetchIndividualReassignedStats(); + + + + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + return ( + + + setCollapsed(value)} + > +

+ + + +

+ + + + + + + +

+ + + + {tableRowData.length > 0 && ( + + )} + + + + + + {isLoading && } + + ); +}; +export default IndividualExamCentreStats; diff --git a/src/Components/LoadingContainer.jsx b/src/Components/LoadingContainer.jsx new file mode 100644 index 0000000..a58e298 --- /dev/null +++ b/src/Components/LoadingContainer.jsx @@ -0,0 +1,25 @@ +import React from "react"; +import { Box } from "@mui/material"; +import Spinner from "react-bootstrap/Spinner"; + +const LoadingContainer = ({ loadingText }) => { + const LoadingContainerStyle = { + backgroundColor: "rgba(0,0,0,0.5)", + overflow: "auto", + }; + + return ( + <> + + + Loading... + + + + ); +}; + +export default LoadingContainer; diff --git a/src/Components/PartACorrection.jsx b/src/Components/PartACorrection.jsx new file mode 100644 index 0000000..309571f --- /dev/null +++ b/src/Components/PartACorrection.jsx @@ -0,0 +1,480 @@ +import React, { useState } from "react"; +import { + DesktopOutlined, + FileOutlined, + PieChartOutlined, + TeamOutlined, + UserOutlined, +} from "@ant-design/icons"; +import { Breadcrumb, Layout, Menu, Typography, theme } from "antd"; +import BookletInput from "./BookletInput"; +import BarcodeInput from "./BarcodeInput"; +import { Box, Button } from "@mui/material"; +import { useEffect } from "react"; +import TextField from "@mui/material/TextField"; +import EditButton from "./EditButton"; +import { width } from "@mui/system"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { useSearchParams } from "react-router-dom"; +import LoadingContainer from "./LoadingContainer"; +import HomeIcon from '@mui/icons-material/Home'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import { useNavigate } from "react-router-dom"; +import QueryStatsIcon from '@mui/icons-material/QueryStats'; + + +const { Header, Content, Footer, Sider } = Layout; +function getItem(label, key, icon, children) { + return { + key, + icon, + children, + label, + }; +} +// const items = [ +// getItem('Option 1', '1', ), +// getItem('Option 2', '2', ), +// getItem('User', 'sub1', , [ +// getItem('Tom', '3'), +// getItem('Bill', '4'), +// getItem('Alex', '5'), +// ]), +// getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]), +// getItem('Files', '9', ), +// ]; + +const items = [getItem("Reassigned Booklet No", "1", )]; + +const PartACorrection = () => { + const [collapsed, setCollapsed] = useState(false); + const [bookletInput, setBookletInput] = useState(null); + const [dataFetched, setDataFetched] = useState(false); + const [studentData, setStudentData] = useState(null); + const [updateReassigned, setUpdateReassigned] = useState(false); + const [reasssingedSno, setReassignedSno] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate() + let [searchParams, setSearchParams] = useSearchParams(); + const searchParamsBarcode = searchParams.get("barcode"); + console.log("Serach parmas sno : ", searchParamsBarcode); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + useEffect(() => { + if (windowWidth < 800) { + setCollapsed(true) + } + if(windowWidth > 800){ + setCollapsed(false) + } + }, [windowWidth]); + + useEffect(() => { + if (searchParamsBarcode) { + setBookletInput(searchParamsBarcode); + } + }, [searchParamsBarcode]); + + useEffect(() => { + submitBookletInput(); + }, [bookletInput]); + + + + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + const submitBookletInput = async () => { + setIsLoading(true); + setStudentData(null); + if (!bookletInput) { + console.log("Returning"); + return; + } + const payload = { + bookletInput, + }; + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchBarcodeInfo`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }); + const responseData = await response.json(); + console.log("Response Data is : ", responseData); + setDataFetched(true); + setIsLoading(false); + if (responseData.status === "success") { + console.log("Into top if"); + if (!responseData.data) { + setStudentData(null); + } + if (responseData.data) { + console.log("Students Data :",responseData.data[0]) + setStudentData(responseData.data[0]); + } + } + }; + + const updateReassignedSno = async () => { + const payload = { + bookletInput, + reasssingedSno, + }; + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updateReassingedSno`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }); + const responseData = await response.json(); + if (responseData.status === "success" && responseData?.status_code == 200) { + console.log("Updation success"); + toast.success("Record Updated Successfully !!"); + } else if ( + responseData.status === "success" && + responseData?.status_code == 405 + ) { + console.log("Updation not allowed"); + toast.error("Reassigned Serial No is Invalid !!"); + } + }; + + return ( + + + setCollapsed(value)} + > +

+ + + +

+ + + + {/* */} + + + + {/* Reassigned Booklet Serial Manual Updation : */} +

+ + {/* + User + Bill + */} + {/*

+ Bill is a cat. +

*/} + + + + + + + {!isLoading && !studentData && ( + +

Invalid Booklet Serial No !!

+ + )} + {dataFetched && studentData && ( + <> + + +

Barcode Info:

+ + + + + Register Number: + + + + + Subject Code: + + + + + Type: + + + {/* + Exam Date: + + */} + + + Reassigned Serial No: + + + { + setReassignedSno(e.target.value); + }} + /> + + + + + + + + + + )} + + + + + + + {!isLoading && !studentData && ( + +

Invalid Booklet Serial No !!

+ + )} + {dataFetched && studentData && ( + <> + + +

Barcode Info:

+ + + + + Register Number: + + + + + Subject Code: + + + + + Type: + + + {/* + Exam Date: + + */} + + + Reassigned Serial No: + + + { + setReassignedSno(e.target.value); + }} + /> + + + + + + + + + + )} + + + {dataFetched && studentData && ( +

+ )} + + + {dataFetched && studentData && ( +

+ )} + + + + + + {isLoading && } + + ); +}; +export default PartACorrection; diff --git a/src/Components/PartAReassigned.jsx b/src/Components/PartAReassigned.jsx new file mode 100644 index 0000000..eea1908 --- /dev/null +++ b/src/Components/PartAReassigned.jsx @@ -0,0 +1,213 @@ +import React, { useState } from "react"; +import { + DesktopOutlined, + FileOutlined, + PieChartOutlined, + TeamOutlined, + UserOutlined, +} from "@ant-design/icons"; +import { Breadcrumb, Layout, Menu, Typography, theme } from "antd"; +import BookletInput from "./BookletInput"; +import { Box, Button } from "@mui/material"; +import { useEffect } from "react"; +import TextField from "@mui/material/TextField"; +import EditButton from "./EditButton"; +import { width } from "@mui/system"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { TablePagination } from "@mui/base/TablePagination"; +import TableComponent from "./TableComponent"; +import LoadingContainer from "./LoadingContainer"; +import HomeIcon from "@mui/icons-material/Home"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import { useNavigate } from "react-router-dom"; +import QueryStatsIcon from "@mui/icons-material/QueryStats"; + +const { Header, Content, Footer, Sider } = Layout; +function getItem(label, key, icon, children) { + return { + key, + icon, + children, + label, + }; +} +// const items = [ +// getItem('Option 1', '1', ), +// getItem('Option 2', '2', ), +// getItem('User', 'sub1', , [ +// getItem('Tom', '3'), +// getItem('Bill', '4'), +// getItem('Alex', '5'), +// ]), +// getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]), +// getItem('Files', '9', ), +// ]; + +const items = [getItem("Reassigned Booklet No", "1", )]; + +const PartAReassigned = () => { + const [collapsed, setCollapsed] = useState(false); + const [anomolyData, setAnomolyData] = useState([]); + const [tableRowData, setTableRowData] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + useEffect(() => { + if (windowWidth < 800) { + setCollapsed(true); + } + if (windowWidth > 800) { + setCollapsed(false); + } + }, [windowWidth]); + + const navigate = useNavigate(); + function createData(barcode,register_number,subject_code,type) { + return { + barcode,register_number,subject_code,type + }; + } + + const fetchAnomalyData = () => { + console.log("Fetching......."); + setIsLoading(true); + fetch( + `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchAnamolyPartAData`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ) + .then((response) => { + console.log("Response fetched.."); + return response.json(); + }) + .then((responseData) => { + console.log("Response Data is : ", responseData); + setIsLoading(false); + if (responseData.status === "success") { + setAnomolyData(responseData.data); + const tmpData = []; + for (const data of responseData.data) { + tmpData.push(createData(data.barcode,data.register_number,data.subject_code,data.type)); + } + console.log("Tmp data is : ", tmpData); + if (tmpData.length > 0) { + setTableRowData(tmpData); + } + } + }) + .catch((error) => { + console.error("Error fetching data: ", error); + setIsLoading(false); + }); + }; + + useEffect(() => { + fetchAnomalyData(); + }, []); + + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + return ( + + + setCollapsed(value)} + > +

+ + + +

+ + + + {/* */} + + + +

+ + + + {tableRowData.length > 0 && ( + + )} + + + + + + {isLoading && } + + ); +}; +export default PartAReassigned; diff --git a/src/Components/ReassignedStats.jsx b/src/Components/ReassignedStats.jsx new file mode 100644 index 0000000..7807c3d --- /dev/null +++ b/src/Components/ReassignedStats.jsx @@ -0,0 +1,204 @@ +import React, { useState } from "react"; +import { + DesktopOutlined, + FileOutlined, + PieChartOutlined, + TeamOutlined, + UserOutlined, +} from "@ant-design/icons"; +import { Breadcrumb, Layout, Menu, Typography, theme } from "antd"; +import BookletInput from "./BookletInput"; +import { Box, Button } from "@mui/material"; +import { useEffect } from "react"; +import TextField from "@mui/material/TextField"; +import EditButton from "./EditButton"; +import { width } from "@mui/system"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { TablePagination } from "@mui/base/TablePagination"; +import TableComponent from "./TableComponent"; +import LoadingContainer from "./LoadingContainer"; +import HomeIcon from "@mui/icons-material/Home"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import { useNavigate } from "react-router-dom"; +import QueryStatsIcon from "@mui/icons-material/QueryStats"; + + +const { Header, Content, Footer, Sider } = Layout; +function getItem(label, key, icon, children) { + return { + key, + icon, + children, + label, + }; +} + +const items = [getItem("Reassigned Booklet No", "1", )]; + +const ReassignedStats = () => { + const [collapsed, setCollapsed] = useState(false); + const [anomolyData, setAnomolyData] = useState([]); + const [tableRowData, setTableRowData] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate(); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + useEffect(() => { + if (windowWidth < 800) { + setCollapsed(true) + } + if(windowWidth > 800){ + setCollapsed(false) + } + }, [windowWidth]); + + function createData( + exam_centre_code, + total_count, + manual_verification_count + ) { + return { + exam_centre_code, + total_count, + manual_verification_count + }; + } + + + const fetchReassignedStats = () => { + useEffect(() => { + setIsLoading(true); + fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchReassignedStats`, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }) + .then((response) => response.json()) + .then((responseData) => { + console.log("Response Data is : ", responseData); + setIsLoading(false); + if (responseData.status === "success") { + setAnomolyData(responseData?.data); + const tmpData = []; + for (var data of responseData?.data) { + // console.log("Student name : ",data?.student_name) + tmpData.push( + createData( + data?.exam_centre_code, + data?.total_count, + data?.manual_verification_count + ) + ); + } + console.log("Tmp data is : ", tmpData); + if (tmpData.length > 0) { + setTableRowData(tmpData); + } + } + }); + }, []); + }; + fetchReassignedStats(); + + + + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + return ( + + + setCollapsed(value)} + > +

+ + + +

+ + + + + + + +

+ + + + {tableRowData.length > 0 && ( + + )} + + + + + + {isLoading && } + + ); +}; +export default ReassignedStats; diff --git a/src/Components/TableComponent.jsx b/src/Components/TableComponent.jsx new file mode 100644 index 0000000..39bca12 --- /dev/null +++ b/src/Components/TableComponent.jsx @@ -0,0 +1,383 @@ +import * as React from "react"; +import { styled } from "@mui/system"; +import { + TablePagination, + tablePaginationClasses as classes, +} from "@mui/base/TablePagination"; + +export default function TableComponent({ rows, type }) { + console.log("Rows in table component : ", rows); + console.log("Type is : ", type); + const [page, setPage] = React.useState(0); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + + // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = + page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + return ( + + {type === "AnomolyReassigned" && ( + <> +

Manual Verification Needed Students :

+ + + + + + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + : rows + ).map((row) => ( + + + + + + + + + + ))} + {emptyRows > 0 && ( + + + )} + + + + + + +

Attendence Serial No	Answer Booklet Serial No	Exam Centre Code	Exam Centre	Student Name	Register Number	Reassigned Booklet Serial No
{row.attendence_serial_no}	+ + {row.student_slno} + +	+ {row.exam_centre_code} +	+ {row.exam_centre} +	+ {row.student_name} +	+ {row.register_number} +	+ {row.reassigned_serial_no} +
+

+ + )} + {type === "ReassignedStats" && ( + <> +

Exam Centre Code Complete MetaData :

+ + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + : rows + ).map((row) => ( + + + + + + ))} + {emptyRows > 0 && ( + + + )} + + + + + + +

Exam Centre Code	Total Scanned Count	Manual Verification Count
+ + {row.exam_centre_code} + +	+ {row.total_count} +	+ {row.manual_verification_count} +
+

+ + )} + {type === "IndividualReassignedStats" && ( + <> +

Exam Centre Code-Date Wise MetaData :

+ + + + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + : rows + ).map((row) => ( + + + + + + + + ))} + {emptyRows > 0 && ( + + + )} + + + + + + +

Exam Centre Code	Exam Date	Subject Code	Total Count	Manual Verification Count
+ {row.exam_centre_code} +	+ {row.exam_date} +	+ {row.subject_code} +	+ {row.total_count} +	+ {row.manual_verification_needed_count} +
+

+ + )} + {type === "PartAReassigned" && ( + <> +

Part-A Anomoly Data :

+ + + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + : rows + ).map((row) => ( + + + + + + + ))} + {emptyRows > 0 && ( + + + )} + + + + + + +

Barcode	Subject Code	Register Number	Type
+ {row.barcode} +	+ {row.subject_code} +	+ {row.register_number} +	+ {row.type} +
+

+ + )} + + ); +} + +const grey = { + 50: "#F3F6F9", + 100: "#E5EAF2", + 200: "#DAE2ED", + 300: "#C7D0DD", + 400: "#B0B8C4", + 500: "#9DA8B7", + 600: "#6B7A90", + 700: "#434D5B", + 800: "#303740", + 900: "#1C2025", +}; + +const Root = styled("div")( + ({ theme }) => ` + table { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + border-collapse: collapse; + width: 100%; + } + + td, + th { + border: 1px solid ${theme.palette.mode === "dark" ? grey[800] : grey[200]}; + text-align: left; + padding: 8px; + } + + th { + background-color: ${theme.palette.mode === "dark" ? grey[900] : "#fff"}; + } + ` +); + +const CustomTablePagination = styled(TablePagination)` + & .${classes.toolbar} { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + + @media (min-width: 768px) { + flex-direction: row; + align-items: center; + } + } + + & .${classes.selectLabel} { + margin: 0; + } + + & .${classes.displayedRows} { + margin: 0; + + @media (min-width: 768px) { + margin-left: auto; + } + } + + & .${classes.spacer} { + display: none; + } + + & .${classes.actions} { + display: flex; + gap: 0.25rem; + } +`; diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..6119ad9 --- /dev/null +++ b/src/index.css @@ -0,0 +1,68 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..40dcce1 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' +import 'bootstrap/dist/css/bootstrap.min.css'; + + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..33886ec --- /dev/null +++ b/vite.config.js @@ -0,0 +1,24 @@ +// import { defineConfig } from 'vite' +// import react from '@vitejs/plugin-react' + +// // https://vitejs.dev/config/ +// export default defineConfig({ +// plugins: [react()], +// }) + + +import { defineConfig, loadEnv } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig(({ mode }) => { + // Load environment variables based on the current mode (e.g., 'development' or 'production') + const env = loadEnv(mode, process.cwd()); + + return { + define: { + 'process.env': env // expose all environment variables prefixed with VITE_ to process.env + }, + plugins: [react()], + } +})