new ui changes

.env

@@ -1,4 +1,4 @@
 # VITE_REACT_APP_BACKEND_URL="https://sandbox.exampaper.vidh.ai"
-VITE_REACT_APP_BACKEND_URL="http://localhost:9999"
+# VITE_REACT_APP_BACKEND_URL="http://localhost:9999"
 METABASE_BASE_URL="http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf"
-# VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"
+VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"

src/App.jsx

@@ -12,6 +12,9 @@ import PartAReassigned from "./Components/PartAReassigned";
 import PartACorrection from "./Components/PartACorrection";
 import Verification from "./Components/Verification";
 import Statistics from "./Components/Statistics";
+import AnomolyAttendencePage from "./Components/AnomolyAttendencePage";
+import AttendenceAdditionalRecord from "./Components/AttendenceAdditionalRecord";
+import AttendenceAdditionalRecordCorrection from "./Components/AttendenceAdditionalRecordCorrection";
 
 function App() {
   return (
@@ -20,39 +23,44 @@ function App() {
         <Routes>
           <Route path="/" element={<Home />}></Route>
           <Route
-            path="/anomoly/reassigned"
+            path="/anomoly/attendence/reassigned"
             element={<AnomolyReassigned />}
           ></Route>
           <Route
             path="/anomoly/reassigned/booklet"
             element={<AttendenceCorrection />}
-          >
+          ></Route>
-            </Route>
-            <Route
-              path="/anomoly/reassigned/stats"
-              element={<ReassignedStats />}
-            >
-          </Route>
           <Route
-              path="/anomoly/reassigned/stats/:exam_centre_code"
+            path="/anomoly/reassigned/stats"
-              element={<IndividualExamCentreStats/>}
+            element={<ReassignedStats />}
-            >
+          ></Route>
-          </Route>
           <Route
-               path="/anomoly/PartA"
+            path="/anomoly/attendence"
-               element={<PartAReassigned/>}
+            element={<AnomolyAttendencePage />}
-          >
+          ></Route>
-          </Route>
+          <Route
+            path="/anomoly/attendence/additionalRecord"
+            element={<AttendenceAdditionalRecord />}
+          />
+          <Route
+            path="/anomoly/attendence/additionalRecord/correction"
+            element={<AttendenceAdditionalRecordCorrection />}
+          />
+          <Route
+            path="/anomoly/reassigned/stats/:exam_centre_code"
+            element={<IndividualExamCentreStats />}
+          ></Route>
+          <Route path="/anomoly/PartA" element={<PartAReassigned />}></Route>
           {/* <Route
                path="/verification"
                element={<Verification/>}
           >
           </Route> */}
-          <Route path="/statistics" element={<Statistics/>}></Route>
+          <Route path="/statistics" element={<Statistics />}></Route>
-          <Route path="/anomoly/partA/booklet"
+          <Route
-          element={<PartACorrection/>}
+            path="/anomoly/partA/booklet"
-          >
+            element={<PartACorrection />}
-          </Route>
+          ></Route>
         </Routes>
       </BrowserRouter>
     </>

src/Components/AnomolyAttendencePage.jsx

@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+import HomepageCard from "./HomepageCard";
+import {useState,useEffect} from "react"
+
+
+const AnomolyAttendencePage = () =>{
+    const cards = [
+        {
+          title: "Reassingned Serial No",
+          url: "/anomoly/attendence/reassigned"
+        },
+        {
+            title: "Additional Record Insertion",
+            url: "/anomoly/attendence/additionalRecord",
+        },   {
+            title: "Additional Sheet Insertion",
+            url: "/anomoly/attendence/additionalSheet",
+        }
+      ]
+
+    return (
+        <>
+          <Box>
+            <Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
+              <h1>Welcome to exampaper.vidh.ai</h1>
+            </Box>
+            <Box className="p-3">
+              {cards.map((card) => (
+                <HomepageCard title={card?.title} url={card?.url} />
+              ))}
+            </Box>
+          </Box>
+        </>
+      );
+}
+
+
+
+export default AnomolyAttendencePage; 

src/Components/AnomolyReassigned.jsx

@@ -77,7 +77,7 @@ const AnomolyReassigned = () => {
   const navigate = useNavigate();
   function createData(
     attendence_serial_no,
-    student_slno,
+    answer_booklet_sno,
     exam_centre_code,
     exam_centre,
     student_name,
@@ -86,7 +86,7 @@ const AnomolyReassigned = () => {
   ) {
     return {
       attendence_serial_no,
-      student_slno,
+      answer_booklet_sno,
       exam_centre_code,
       exam_centre,
       student_name,
@@ -101,7 +101,7 @@ const AnomolyReassigned = () => {
       tmpData.push(
         createData(
           data.attendence_serial_no,
-          data.student_slno,
+          data.answer_booklet_sno,
           data.exam_centre_code,
           data.exam_centre,
           data.student_name,

src/Components/AttendenceAdditionalRecord.jsx

@@ -0,0 +1,286 @@
+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 { updateAttendenceAnomolyData } from "../redux/actions/actions";
+import { useDispatch, useSelector } from "react-redux";
+
+const { Header, Content, Footer, Sider } = Layout;
+function getItem(label, key, icon, children) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  };
+}
+
+
+const items = [getItem("Reassigned Booklet No", "1", <PieChartOutlined />)];
+
+const AttendenceAdditionalRecord = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const [anomolyData, setAnomolyData] = useState([]);
+  const [filteredAnomolyData,setFilterAnomolyData] = useState([])
+  const [tableRowData, setTableRowData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [distinctExamCentreCodes,setDistinctExamCentreCodes] = useState([])
+  const dispatch = useDispatch();
+  const reduxAnomolyData = useSelector((state) => state.attendenceAnomolyData);
+  const [filterSelectedExamCentreCode,setFilterSelectedExamCentreCode] = useState("")
+
+  // Log Redux store state
+  console.log("Redux store state after dispatch:", reduxAnomolyData);
+
+  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(
+    qrcode,
+    coverA,
+    coverB,
+    subject_code,
+    total_students,
+    total_present,
+    total_absent
+  ) {
+    return {
+      qrcode,
+      coverA,
+      coverB,
+      subject_code,
+      total_students,
+      total_present,
+      total_absent
+    };
+  }
+
+  useEffect(()=>{
+    const tmpData = [];
+    for (const data of anomolyData) {
+      tmpData.push(
+        createData(
+          data.qrcode,
+          data.coverA,
+          data.coverB,
+          data.subject_code,
+          data.total_students,
+          data.total_present,
+          data.total_absent
+        )
+      );
+    }
+    console.log("Tmp data is : ", tmpData);
+    if (tmpData.length > 0) {
+      setTableRowData(tmpData);
+    }
+  },[anomolyData])
+
+  const fetchAnomalyData = () => {
+    console.log("Fetching.......");
+    setIsLoading(true);
+    fetch(
+      `${
+        import.meta.env.VITE_REACT_APP_BACKEND_URL
+      }/fetchAnamolyAttendencAdditionalRecordeData`,
+      {
+        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 tmpExamCentreCodes = [];
+          const distinctExamCentreCodesSet = new Set(distinctExamCentreCodes);
+          
+          for (var data of responseData?.data) {
+            if (!distinctExamCentreCodesSet.has(data.exam_centre_code)) {
+              distinctExamCentreCodesSet.add(data.exam_centre_code);
+              tmpExamCentreCodes.push(data.exam_centre_code);
+            }
+            setFilterAnomolyData([...tmpExamCentreCodes])
+          }
+          
+          
+          setDistinctExamCentreCodes([...distinctExamCentreCodesSet]);
+          console.log("Tmp exam centre code: ", tmpExamCentreCodes);
+
+          // console.log("Data to be stored in store : ", responseData?.data);
+          //dispatch(updateAttendenceAnomolyData(responseData?.data));
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching data: ", error);
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (reduxAnomolyData.length > 0) {
+      console.log("Redux anomoly data found")
+      setAnomolyData(reduxAnomolyData)
+    } else {
+      console.log("Redux anomoly data not found")
+      fetchAnomalyData();
+    }
+  }, []);
+
+
+  useEffect(()=>{
+   const tmpData = []
+   for(var data in anomolyData){
+    if(data?.exam_centre_code == filterSelectedExamCentreCode){
+      tmpData.push(data)
+    }
+   }
+
+  },[filterSelectedExamCentreCode])
+
+
+
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  return (
+    <Layout
+      style={{
+        minHeight: "100vh",
+      }}
+    >
+      <ToastContainer />
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+      >
+        <div className="demo-logo-vertical" />
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={["1"]}
+          mode="inline"
+          items={items}
+        />
+      </Sider>
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+          }}
+        >
+          <Box className="d-flex justify-content-between h-100 py-1 px-2">
+            <Button
+              className="bg-primary p-1 text-light"
+              onClick={() => {
+                navigate(-1);
+              }}
+            >
+              <ArrowBackIcon />
+            </Button>
+            <Box className="d-flex justify-content-between gap-2">
+              <Button
+                className="bg-primary p-1 text-light"
+                onClick={() => {
+                  navigate("/anomoly/reassigned/stats");
+                }}
+              >
+                <QueryStatsIcon />
+              </Button>
+              <Button
+                className="bg-primary p-1 text-light"
+                onClick={() => {
+                  navigate("/");
+                }}
+              >
+                <HomeIcon />
+              </Button>
+            </Box>
+          </Box>
+        </Header>
+        <Content
+          style={{
+            margin: "16px 16px",
+          }}
+        >
+          <Box className="w-100 d-flex justify-content-between">
+            <Box className="w-100 d-flex justify-content-center">
+              {tableRowData.length > 0 && (
+                <TableComponent
+                  filterSelectedExamCentreCode = {filterSelectedExamCentreCode}
+                  setFilterSelectedExamCentreCode = {setFilterSelectedExamCentreCode}
+                  rows={tableRowData}
+                  type={"AttendenceAdditionalRecord"}
+                  distinctExamCentreCodes = {distinctExamCentreCodes}
+                />
+              )}
+                {tableRowData.length == 0 && (
+                <Box className="w-100 d-flex justify-content-center py-2 align-items-center text-center">
+                  <h6>No Data Found !!</h6>
+                 </Box>
+              )}
+            </Box>
+          </Box>
+        </Content>
+        <Footer
+          style={{
+            textAlign: "center",
+          }}
+        >
+          exampaper.vidh.ai ©{new Date().getFullYear()}
+        </Footer>
+      </Layout>
+      {isLoading && <LoadingContainer loadingText={"Loading"} />}
+    </Layout>
+  );
+};
+export default AttendenceAdditionalRecord;

src/Components/AttendenceAdditionalRecordCorrection.jsx

@@ -0,0 +1,708 @@
+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";
+import { useDispatch, useSelector } from "react-redux";
+import { updateAttendenceAnomolyData } from "../redux/actions/actions";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+
+const { Header, Content, Footer, Sider } = Layout;
+function getItem(label, key, icon, children) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  };
+}
+
+const items = [getItem("Reassigned Booklet No", "1", <PieChartOutlined />)];
+
+const AttendenceAdditionalRecordCorrection = () => {
+  console.log("Checking1 ...");
+  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 [registerNumber, setRegisterNumber] = useState(null);
+  const [backgroundPosition, setBackgroundPosition] = useState("0% 0%");
+  const [zoomed, setZoomed] = useState(false);
+  const dispatch = useDispatch();
+  const [scaleWidthValue, setScaleWidthValue] = useState(80);
+  const [rotateValue, setRotateValue] = useState(0);
+  const [attendenceQRcode,setAttendenceQRcode] = useState(null)
+
+  // const reduxAnomolyData = useSelector((state) => state.attendenceAnomolyData);
+  // console.log("Anomoly Data is : ", reduxAnomolyData);
+  const [anomolyData, setAnomolyData] = useState([]);
+
+  const handleMouseMove = (e) => {
+    const { left, top, width, height } = e.target.getBoundingClientRect();
+    const x = ((e.pageX - left) / width) * 100;
+    const y = ((e.pageY - top) / height) * 100;
+    setBackgroundPosition(`${x}% ${y}%`);
+    setZoomed(true);
+  };
+
+  const navigate = useNavigate();
+  let [searchParams, setSearchParams] = useSearchParams();
+  const searchParamsqrcode = searchParams.get("qrcode");
+  // 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 (searchParamsqrcode) {
+      setAttendenceQRcode(searchParamsqrcode);
+    }
+  }, [searchParamsqrcode]);
+
+  useEffect(() => {
+    submitQrInputData();
+  }, [attendenceQRcode]);
+
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  // useEffect(() => {
+  //   if (reduxAnomolyData.length === 0) {
+  //     fetchAnomalyData();
+  //   }
+  // }, []);
+
+  const fetchAnomalyData = () => {
+    console.log("Fetching.......");
+    setIsLoading(true);
+    fetch(
+      `${
+        import.meta.env.VITE_REACT_APP_BACKEND_URL
+      }/fetchAnamolyAttendenceData`,
+      {
+        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);
+          console.log("Data to be stored in store : ", responseData?.data);
+          // dispatch(updateAttendenceAnomolyData(responseData?.data));
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching data: ", error);
+        setIsLoading(false);
+      });
+  };
+
+  const submitQrInputData = async () => {
+    setIsLoading(true);
+    setStudentData(null);
+    if (!bookletInput) {
+      console.log("Returning");
+    }
+    const payload = {
+      attendenceQRcode,
+    };
+    const response = await fetch(
+      `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchAttendenceAdditionalqrData`,
+      {
+        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 student_data = responseData.data[0];
+        setRegisterNumber(student_data?.register_number);
+      }
+    }
+  };
+
+  const url = `https://docs.exampaper.vidh.ai/${studentData?.s3_path}`;
+  // console.log("Url is : ", url);
+  const figureStyle = {
+    backgroundImage: `url(${url})`,
+    backgroundPosition: zoomed ? backgroundPosition : "center",
+    backgroundSize: zoomed ? "200%" : "cover",
+    height: "100%", // Adjust the height as needed
+    width: "60%", // Adjust the width as needed
+    border: "1px solid #ddd",
+    overflow: "hidden",
+  };
+
+  const ZoomInImage = () => {
+    console.log("Zooming In Image ....");
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newScaleWidthValue = scaleWidthValue + 10;
+      setScaleWidthValue(newScaleWidthValue);
+      // ele.style.transform = `scale(${newScaleValue})`;
+      ele.style.width = `${newScaleWidthValue}%`;
+    }
+  };
+
+  const ZoomOutImage = () => {
+    console.log("Zooming Out Image ....");
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newScaleWidthValue = scaleWidthValue - 10;
+      setScaleWidthValue(newScaleWidthValue);
+      // ele.style.transform = `scale(${newScaleValue})`;
+      ele.style.width = `${newScaleWidthValue}%`;
+    }
+  };
+
+  const RotateImageLeft = () => {
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newRotateValue = rotateValue - 90;
+      setRotateValue(newRotateValue);
+      ele.style.transform = `rotate(${newRotateValue}deg)`;
+    }
+  };
+
+  const RotateImageRight = () => {
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newRotateValue = rotateValue + 90;
+      setRotateValue(newRotateValue);
+      ele.style.transform = `rotate(${newRotateValue}deg)`;
+    }
+  };
+
+  const ImageStyle = {
+    // transform: `scale(${scaleValue})`,
+    transformOrigin: "left", // Adjust the zoom origin as needed
+    transition: "transform 0.2s ease-in-out",
+  };
+
+  const containerStyle = {
+    width: "auto", // Set the width and height as needed
+    maxHeight: "90%",
+    overflowX: "scroll",
+    position: "relative",
+  };
+
+  const handleMouseLeave = () => {
+    setBackgroundPosition("0% 0%");
+    setZoomed(false);
+  };
+
+  const updateReassignedSno = async () => {
+    setIsLoading(true);
+    // if(reduxAnomolyData.length === 0){
+    //   console.log("Redux anomoly data length is 0.......")
+    //   fetchAnomalyData()
+    // }
+    console.log("Reassgined Sno : ", reasssingedSno);
+    const payload = {
+      bookletInput,
+      reasssingedSno,
+      registerNumber,
+    };
+    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();
+    setIsLoading(false);
+    setReassignedSno(null);
+    if (responseData.status === "success" && responseData?.status_code == 200) {
+      console.log("Updation success");
+      toast.success("Record Updated Successfully !!");
+      var index = 0
+      var RecordIndex = 0
+      const filteredData = reduxAnomolyData.filter((data) => {
+        if (data?.student_slno === searchParamsBookletSerialNo) {
+          RecordIndex = index
+          console.log("data matched : ", data);
+          return false; // Return false to remove the matched item
+        }
+        index += 1
+        return true; // Keep the unmatched items
+      });
+
+      console.log("Filtered Data: ", filteredData);
+      // dispatch(updateAttendenceAnomolyData(filteredData));
+      if (filteredData.length > 0) {
+        navigate(
+          `/anomoly/reassigned/booklet?sno=${filteredData[RecordIndex].student_slno}`
+        );
+      }
+    } else if (
+      responseData.status === "success" &&
+      responseData?.status_code == 405
+    ) {
+      console.log("Updation not allowed");
+      toast.error("Reassigned Serial No is Invalid !!");
+    }
+  };
+
+  const markAsAssigned = async () => {
+    setIsLoading(true);
+    const payload = { bookletInput };
+    const response = await fetch(
+      `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/markAsAssigned`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      }
+    );
+    const responseData = await response.json();
+    setIsLoading(false);
+    if (responseData.status === "success") {
+      toast.success("Record Updated Successfully !!");
+      var index = 0
+      var RecordIndex = 0
+      const filteredData = reduxAnomolyData.filter((data) => {
+        if (data?.student_slno === searchParamsBookletSerialNo) {
+          RecordIndex = index
+          console.log("data matched : ", data);
+          return false; // Return false to remove the matched item
+        }
+        index += 1
+        return true; // Keep the unmatched items
+      });
+
+      console.log("Filtered Data: ", filteredData);
+      // dispatch(updateAttendenceAnomolyData(filteredData));
+      if (filteredData.length > 0) {
+        navigate(
+          `/anomoly/reassigned/booklet?sno=${filteredData[RecordIndex].student_slno}`
+        );
+      }
+    }
+  };
+
+  return (
+    <Layout
+      style={{
+        minHeight: "100vh",
+      }}
+    >
+      <ToastContainer />
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+      >
+        <div className="demo-logo-vertical" />
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={["1"]}
+          mode="inline"
+          items={items}
+        />
+      </Sider>
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+          }}
+        >
+          <Box className="d-flex justify-content-between h-100 py-1 px-2">
+            <Button
+              className="bg-primary p-1 text-light"
+              onClick={() => {
+                navigate(-1);
+              }}
+            >
+              <ArrowBackIcon />
+            </Button>
+            <Box className="d-flex justify-content-between gap-2">
+              <Button
+                className="bg-primary p-1 text-light"
+                onClick={() => {
+                  navigate("/anomoly/reassigned/stats");
+                }}
+              >
+                <QueryStatsIcon />
+              </Button>
+              <Button
+                className="bg-primary p-1 text-light"
+                onClick={() => {
+                  navigate("/");
+                }}
+              >
+                <HomeIcon />
+              </Button>
+            </Box>
+          </Box>
+          {/* <Box>Reassigned Booklet Serial Manual Updation :</Box> */}
+        </Header>
+        <Content
+          style={{
+            margin: "16px 16px",
+          }}
+        >
+          {/* <Breadcrumb
+            style={{
+              margin: "16px 0",
+            }}
+          >
+            <Breadcrumb.Item>User</Breadcrumb.Item>
+            <Breadcrumb.Item>Bill</Breadcrumb.Item>
+          </Breadcrumb> */}
+          {/* <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+              background: colorBgContainer,
+              borderRadius: borderRadiusLG,
+            }}
+          >
+            Bill is a cat.
+          </div> */}
+          <Box className="w-100 d-flex flex-column flex-md-row justify-content-between">
+            <Box className="w-25 d-none d-md-flex flex-column">
+              <Box className="d-flex justify-content-between">
+                {/* <BookletInput
+                  className="d-flex flex-1"
+                  setBookletInput={setBookletInput}
+                  bookletInput={bookletInput}
+                  setDataFetched={setDataFetched}
+                /> */}
+
+                {/* <Button
+                  className="px-md-5 px-2 mx-1 mx-md-2 text-light bg-primary"
+                  onClick={submitBookletInput}
+                >
+                  Submit
+                </Button> */}
+              </Box>
+              {/* {!isLoading && !studentData && (
+                <Box className="w-100 py-5">
+                  <h6>Invalid Booklet Serial No !!</h6>
+                </Box>
+              )} */}
+              {studentData && (
+                <>
+                  <Box>
+                    <Box className="d-flex justify-content-start px-2 py-3">
+                      <h6>
+                        <u>Booklet Info:</u>
+                      </h6>
+                    </Box>
+
+                    <Box className="px-2">
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="student-name-input" className="h6">
+                          <u>Booklet Serial No:</u>
+                        </label>
+                        <h5>{bookletInput}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="student-name-input" className="h6">
+                          <u>Student Name:</u>
+                        </label>
+                        <h5>{studentData?.student_name}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-centre-code-input" className="h6">
+                          <u>Exam Center Code:</u>
+                        </label>
+                        <h5>{studentData?.exam_centre_code}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-centre-input" className="h6">
+                          <u>Exam Centre:</u>
+                        </label>
+                        <h5>{studentData.exam_centre}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-date-input" className="h6">
+                          <u>Exam Date:</u>
+                        </label>
+                        <h5>{studentData?.exam_date}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="reassigned-serial-no-input">
+                          <u>Reassigned Serial No:</u>
+                        </label>
+                        <Box className="d-flex justify-content-between w-100">
+                          <TextField
+                            id="reassigned-serial-no-input"
+                            className="w-100"
+                            value={studentData.reassigned_serial_no}
+                            placeholder={`Please enter the SNo.${studentData?.rownumber} Answer Booklet No`}
+                            autoComplete="off"
+                            onChange={(e) => {
+                              setReassignedSno(e.target.value);
+                            }}
+                          />
+                        </Box>
+                      </Box>
+                      <Box className="py-2 d-flex justify-content-start flex-column gap-2">
+                        <Button
+                          className="text-light bg-primary p-3 w-100"
+                          disabled={!reasssingedSno}
+                          onClick={updateReassignedSno}
+                        >
+                          Update
+                        </Button>
+                        <Button
+                          className="text-light bg-primary p-3 w-100"
+                          onClick={markAsAssigned}
+                        >
+                          Mark As Assigned
+                        </Button>
+                      </Box>
+                    </Box>
+                  </Box>
+                </>
+              )}
+            </Box>
+            <Box className="w-md-25 d-flex d-md-none flex-column">
+              {/* {!isLoading && !studentData && (
+                <Box className="w-100 py-5">
+                  <h6>Invalid Booklet Serial No !!</h6>
+                </Box>
+              )} */}
+              {studentData && (
+                <>
+                  <Box>
+                    <Box className="d-flex justify-content-start px-2 py-3">
+                      <h6>
+                        <u>Booklet Info:</u>
+                      </h6>
+                    </Box>
+
+                    <Box className="px-2">
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="student-name-input" className="h6">
+                          <u>Booklet Serial No:</u>
+                        </label>
+                        <h5>{bookletInput}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="student-name-input" className="h6">
+                          <u>Student Name:</u>
+                        </label>
+                        <h5>{studentData?.student_name}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-centre-code-input" className="h6">
+                          <u>Exam Center Code:</u>
+                        </label>
+                        <h5>{studentData?.exam_centre_code}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-centre-input" className="h6">
+                          <u>Exam Centre:</u>
+                        </label>
+                        <h5>{studentData.exam_centre}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="exam-date-input" className="h6">
+                          <u>Exam Date:</u>
+                        </label>
+                        <h5>{studentData?.exam_date}</h5>
+                      </Box>
+                      <Box className="d-flex flex-column align-items-start gap-2 py-2">
+                        <label for="reassigned-serial-no-input">
+                          <u>Reassigned Serial No:</u>
+                        </label>
+                        <Box className="d-flex justify-content-between w-100">
+                          <TextField
+                            id="reassigned-serial-no-input"
+                            className="w-100"
+                            value={studentData.reassigned_serial_no}
+                            placeholder={`Please enter the SNo.${studentData?.rownumber} Answer Booklet No`}
+                            autoComplete="off"
+                            onChange={(e) => {
+                              setReassignedSno(e.target.value);
+                            }}
+                          />
+                        </Box>
+                      </Box>
+                      <Box className="py-2 d-flex justify-content-start flex-column gap-2">
+                        <Button
+                          className="text-light bg-primary p-3 w-100"
+                          disabled={!reasssingedSno}
+                          onClick={updateReassignedSno}
+                        >
+                          Update
+                        </Button>
+                        <Button
+                          className="text-light bg-primary p-3 w-100"
+                          onClick={markAsAssigned}
+                        >
+                          Mark As Assigned
+                        </Button>
+                      </Box>
+                    </Box>
+                  </Box>
+                </>
+              )}
+            </Box>
+            <Box
+              className="w-75 d-none d-md-block"
+              style={{ height: "800px", overflow: "auto" }}
+            >
+              {studentData && (
+                <>
+                  <Box className="py-2">
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={ZoomInImage}
+                    >
+                      ZoomIn
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={ZoomOutImage}
+                    >
+                      ZoomOut
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={RotateImageLeft}
+                    >
+                      <RotateLeftIcon />
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={RotateImageRight}
+                    >
+                      <RotateRightIcon />
+                    </Button>
+                  </Box>
+                  <img
+                    className="scanned-img"
+                    src={`https://docs.exampaper.vidh.ai/${studentData?.s3_image_path}`}
+                    width={`${scaleWidthValue}%`}
+                  />
+                </>
+              )}
+            </Box>
+            <Box className="w-100 d-md-none overflow-auto">
+              {studentData && (
+                <>
+                  <Box className="py-2">
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={ZoomInImage}
+                    >
+                      ZoomIn
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={ZoomOutImage}
+                    >
+                      ZoomOut
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={RotateImageLeft}
+                    >
+                      <RotateLeftIcon />
+                    </Button>
+                    <Button
+                      className="bg-primary text-light p-3 mx-1"
+                      onClick={RotateImageRight}
+                    >
+                      <RotateRightIcon />
+                    </Button>
+                  </Box>
+                  <img
+                    className="scanned-img"
+                    src={`https://docs.exampaper.vidh.ai/${studentData.s3_path}`}
+                    width={`${scaleWidthValue}%`}
+                  />
+                </>
+              )}
+            </Box>
+          </Box>
+        </Content>
+        <Footer
+          style={{
+            textAlign: "center",
+          }}
+        >
+          exampaper.vidh.ai ©{new Date().getFullYear()}
+        </Footer>
+      </Layout>
+      {isLoading && <LoadingContainer loadingText={"Fetching"} />}
+    </Layout>
+  );
+};
+export default AttendenceAdditionalRecordCorrection;

src/Components/AttendenceCorrection.jsx

@@ -80,7 +80,7 @@ const AttendenceCorrection = () => {
   const navigate = useNavigate();
   let [searchParams, setSearchParams] = useSearchParams();
   const searchParamsBookletSerialNo = searchParams.get("sno");
-  // console.log("Serach parmas sno : ", searchParamsBookletSerialNo);
+  console.log("Serach parmas sno : ", searchParamsBookletSerialNo);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {

src/Components/Home.jsx

@@ -6,7 +6,7 @@ const Home = () => {
   const cards = [
     {
       title: "Reassingned Serial No Anomoly Manual Updation",
-      url: "/anomoly/reassigned",
+      url: "/anomoly/attendence",
     },
     // {
     //   title: "Part A OCR Anomoly - Batch 2022",
@@ -24,10 +24,10 @@ const Home = () => {
     //   title:"Verification",
     //   url:"/verification"
     // }
-    {
+    // {
-      title:"Statistics",
+    //   title:"Statistics",
-      url:"/statistics"
+    //   url:"/statistics"
-    }
+    // }
   ];
   
   // const cards = [

src/Components/PartACorrection.jsx

@@ -102,6 +102,10 @@ const PartACorrection = () => {
 
 
   const subjectCodeInputRef = useRef(null);
+  const examcentreCodeInputRef = useRef(null);
+  const examDateInputRef = useRef(null);
+  const studentNameInputRef = useRef(null);
+  const bookletInputRef = useRef(null);
 
   // Handle the Enter key press in the register number input
   const handleRegisterNumberKeyDown = (e) => {
@@ -793,6 +797,7 @@ const PartACorrection = () => {
                                     id="corrected-register-number-input"
                                     className="w-100"
                                     value={correctedExamCentreCode}
+                                    inputRef={examcentreCodeInputRef}
                                     autoComplete="off"
                                     onChange={(e) => {
                                       setCorrectedExamCentreCode(
@@ -812,6 +817,7 @@ const PartACorrection = () => {
                                     className="w-100"
                                     value={correctedExamDate}
                                     autoComplete="off"
+                                    inputRef = {examDateInputRef}
                                     onChange={(e) => {
                                       setCorrectedExamDate(e.target.value);
                                     }}
@@ -828,6 +834,7 @@ const PartACorrection = () => {
                                     id="corrected-register-number-input"
                                     className="w-100"
                                     value={correctedCandidateName}
+                                    inputRef = {studentNameInputRef}
                                     autoComplete="off"
                                     onChange={(e) => {
                                       setCorrectedCandidateName(e.target.value);
@@ -845,6 +852,7 @@ const PartACorrection = () => {
                                       id="corrected-register-number-input"
                                       className="w-100"
                                       value={correctedSerialNo}
+                                      inputRef={bookletInputRef}
                                       autoComplete="off"
                                       onChange={(e) => {
                                         setCorrectedSerialNo(e.target.value);

src/Components/SimpleDialog.jsx

@@ -37,6 +37,29 @@ const  SimpleDialog = ({dialogBoxConsent,setDialogBoxConsent,showDialogBox,setSh
     setShowDialogBox(false)
   }
 
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'n' || event.key === 'N') {
+      console.log('The "N" key was pressed!');
+      handleNo()
+    }else if(event.key === "Y" || event.key === "y"){
+      console.log("Y is pressed")
+      handleYes()
+    }
+  };
+
+
+
+  // Use useEffect to add the event listener
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, []); 
+
+
+
   useEffect(()=>{
      if(examCentreCode && examDate){
       setMetaDataLink(`http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf?internal_exam_centre_code=${examCentreCode}&ref_exam_date=${examDate}`)

src/Components/TableComponent.jsx

@@ -18,7 +18,7 @@ export default function TableComponent({
   rows,
   type,
   distinctExamCentreCodes,
-  batchType
+  batchType,
 }) {
   // console.log("Exam centre code in table component : ",distinctExamCentreCodes)
   console.log("Rows in table component : ", rows);
@@ -90,9 +90,9 @@ export default function TableComponent({
                   <td>{row.attendence_serial_no}</td>
                   <td style={{ width: 160 }} align="right">
                     <Link
-                      to={`/anomoly/reassigned/booklet?sno=${row.student_slno}`}
+                      to={`/anomoly/reassigned/booklet?sno=${row?.answer_booklet_sno}`}
                     >
-                      {row.student_slno}
+                      {row.answer_booklet_sno}
                     </Link>
                   </td>
                   <td style={{ width: 160 }} align="right">
@@ -301,13 +301,15 @@ export default function TableComponent({
                 : rows
               ).map((row) => (
                 <tr key={row.exam_centre_code}>
-                      <td style={{ width: 160 }} align="right">
+                  <td style={{ width: 160 }} align="right">
-                    <Link to={`/anomoly/partA/booklet?batchType=${batchType}&barcode=${row.barcode}&s3Path=${row.s3_path}&sysNo=${row.systemNo}`}>
+                    <Link
+                      to={`/anomoly/partA/booklet?batchType=${batchType}&barcode=${row.barcode}&s3Path=${row.s3_path}&sysNo=${row.systemNo}`}
+                    >
                       {row?.s3_path}
                     </Link>
                   </td>
                   <td style={{ width: 160 }} align="right">
-                      {row.barcode}
+                    {row.barcode}
                   </td>
                   <td style={{ width: 160 }} align="right">
                     {row.subject_code}
@@ -351,6 +353,88 @@ export default function TableComponent({
           </table>
         </>
       )}
+      {type === "AttendenceAdditionalRecord" && (
+        <>
+          <h5 className="py-2">Part-A Anomoly Data :</h5>
+          <table aria-label="custom pagination table">
+            <thead>
+              <tr>
+                <th>qrcode</th>
+                <th>Cover A</th>
+                <th>Cover B</th>
+                <th>Subject Code</th>
+                <th>Total Students</th>
+                <th>Total Present</th>
+                <th>Total Absent</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(rowsPerPage > 0
+                ? rows.slice(
+                    page * rowsPerPage,
+                    page * rowsPerPage + rowsPerPage
+                  )
+                : rows
+              ).map((row) => (
+                <tr key={row.exam_centre_code}>
+                  <td style={{ width: 160 }} align="right">
+                    <Link
+                      to={`/anomoly/attendence/additionalRecord/correction?qrcode=${row.qrcode}`}
+                    >
+                      {row?.qrcode}
+                    </Link>
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.coverA}
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.coverB}
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.subject_code}
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.total_students}
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.total_present}
+                  </td>
+                  <td style={{ width: 160 }} align="right">
+                    {row.total_absent}
+                  </td>
+                </tr>
+              ))}
+              {emptyRows > 0 && (
+                <tr style={{ height: 41 * emptyRows }}>
+                  <td colSpan={3} aria-hidden />
+                </tr>
+              )}
+            </tbody>
+            <tfoot>
+              <tr>
+                <CustomTablePagination
+                  rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
+                  colSpan={3}
+                  count={rows.length}
+                  rowsPerPage={rowsPerPage}
+                  page={page}
+                  slotProps={{
+                    select: {
+                      "aria-label": "rows per page",
+                    },
+                    actions: {
+                      showFirstButton: true,
+                      showLastButton: true,
+                    },
+                  }}
+                  onPageChange={handleChangePage}
+                  onRowsPerPageChange={handleChangeRowsPerPage}
+                />
+              </tr>
+            </tfoot>
+          </table>
+        </>
+      )}
     </Root>
   );
 }