latest

.env

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

package-lock.json

@@ -21,6 +21,8 @@
         "react-dom": "^18.3.1",
         "react-lazy-load-image-component": "^1.6.0",
         "react-medium-image-zoom": "^5.2.4",
+        "react-notifications": "^1.7.4",
+        "react-notifications-component": "^4.0.1",
         "react-qr-barcode-scanner": "^1.0.6",
         "react-redux": "^9.1.2",
         "react-router-dom": "^6.23.1",
@@ -5260,6 +5262,36 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-notifications": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
+      "integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
+      "dependencies": {
+        "acorn": "6.4.1",
+        "classnames": "^2.1.1",
+        "prop-types": "^15.5.10",
+        "react-transition-group": "^4.4.1"
+      }
+    },
+    "node_modules/react-notifications-component": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-notifications-component/-/react-notifications-component-4.0.1.tgz",
+      "integrity": "sha512-NRBkWO19AsXmN0b8YQ0L12eoCAhrnmIZtGm77ATWSfQEXPL5PYSyeACpx7tePP+R2De9b0IP4yk9vY4TtzC02w==",
+      "peerDependencies": {
+        "react": "^18.0.1"
+      }
+    },
+    "node_modules/react-notifications/node_modules/acorn": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/react-qr-barcode-scanner": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz",
@@ -9829,6 +9861,29 @@
       "resolved": "https://registry.npmjs.org/react-medium-image-zoom/-/react-medium-image-zoom-5.2.4.tgz",
       "integrity": "sha512-XLu/fLqpbmhiDAGA6yie78tDv4kh8GxvS7kKQArSOvCvm5zvgItoh4h01NAAvnezQ60ovsTeedHiHG3eG9CcGg=="
     },
+    "react-notifications": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
+      "integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
+      "requires": {
+        "acorn": "6.4.1",
+        "classnames": "^2.1.1",
+        "prop-types": "^15.5.10",
+        "react-transition-group": "^4.4.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
+        }
+      }
+    },
+    "react-notifications-component": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-notifications-component/-/react-notifications-component-4.0.1.tgz",
+      "integrity": "sha512-NRBkWO19AsXmN0b8YQ0L12eoCAhrnmIZtGm77ATWSfQEXPL5PYSyeACpx7tePP+R2De9b0IP4yk9vY4TtzC02w=="
+    },
     "react-qr-barcode-scanner": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz",

package.json

@@ -23,6 +23,8 @@
     "react-dom": "^18.3.1",
     "react-lazy-load-image-component": "^1.6.0",
     "react-medium-image-zoom": "^5.2.4",
+    "react-notifications": "^1.7.4",
+    "react-notifications-component": "^4.0.1",
     "react-qr-barcode-scanner": "^1.0.6",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",

src/App.css

@@ -48,4 +48,191 @@
 
 .visited{
   background-color:rgba(128, 128, 128, 0.5) !important;
+}
+
+/* Notification Styles */
+.notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 15px;
+  border-radius: 5px;
+  color: #fff;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.notification.show {
+  opacity: 1;
+}
+
+.notification.hide {
+  opacity: 0;
+}
+
+.notification.info {
+  background-color: #2196f3;
+}
+
+.notification.success {
+  background-color: green;
+}
+
+.notification.error {
+  background-color: #f44336;
+}
+
+
+.white-background{
+  background-color: white;
+}
+
+.grey-background{
+  background-color: rgba(128, 128, 128, 0.1);
+}
+
+
+.notification {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  padding: 10px;
+  z-index: 1000;
+  border-radius: 5px;
+}
+
+.notification.show {
+  opacity: 1;
+}
+
+.notification.hide {
+  opacity: 0;
+}
+
+.notification.info {
+  background-color: blue;
+  color: white;
+}
+
+.notification.success {
+  background-color: green;
+  color: white;
+}
+
+.notification.error {
+  background-color: red;
+  color: white;
+}
+
+
+*{
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+html,body{
+  height: 100%;
+}
+body{
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+button{
+  padding: 8px 16px;
+  font-size: 25px;
+  font-weight: 500;
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  background: #e69100;
+  color: white;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+.alert{
+  background: #ffdb9b;
+  padding: 20px 40px;
+  min-width: 420px;
+  position: absolute;
+  right: 0;
+  top: 10px;
+  border-radius: 4px;
+  border-left: 8px solid #ffa502;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.alert.showAlert{
+  opacity: 1;
+  pointer-events: auto;
+}
+.alert.show{
+  animation: show_slide 1s ease forwards;
+}
+@keyframes show_slide {
+  0%{
+    transform: translateX(100%);
+  }
+  40%{
+    transform: translateX(-10%);
+  }
+  80%{
+    transform: translateX(0%);
+  }
+  100%{
+    transform: translateX(-10px);
+  }
+}
+.alert.hide{
+  animation: hide_slide 1s ease forwards;
+}
+@keyframes hide_slide {
+  0%{
+    transform: translateX(-10px);
+  }
+  40%{
+    transform: translateX(0%);
+  }
+  80%{
+    transform: translateX(-10%);
+  }
+  100%{
+    transform: translateX(100%);
+  }
+}
+.alert .fa-exclamation-circle{
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #ce8500;
+  font-size: 30px;
+}
+.alert .msg{
+  padding: 0 20px;
+  font-size: 18px;
+  color: #ce8500;
+}
+.alert .close-btn{
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #ffd080;
+  padding: 20px 18px;
+  cursor: pointer;
+}
+.alert .close-btn:hover{
+  background: #ffc766;
+}
+.alert .close-btn .fas{
+  color: #ce8500;
+  font-size: 22px;
+  line-height: 40px;
 }

src/App.jsx

@@ -30,6 +30,7 @@ import PlayGround from "./Components/PlayGround";
 import Revaluation from "./Components/Revaluation";
 import PlayGroundUpdated from "./Components/PlaygroundUpdated"
 import DummyDuplicates from "./Components/DummyDuplicates";
+import IndividualStudAttendence from "./Components/IndividualStudAttendence";
 
 
 function App() {
@@ -58,6 +59,7 @@ function App() {
             path="/sqlPlayground/Editor"
             element={<RecordEditor />}
           ></Route>
+          <Route path = "/anomoly/attendence/stud_check" element={<IndividualStudAttendence/>}></Route>
           <Route
             path="/anomoly/attendence/additionalSheet"
             element={<AttendanceAdditionalSheet />}

src/Components/AnomolyAttendencePage.jsx

@@ -16,7 +16,11 @@ const AnomolyAttendencePage = () =>{
            {
             title: "Additional Sheet Insertion",
             url: "/anomoly/attendence/additionalSheet",
-        }
+        },
+        {
+          title: "Individual Attendence Sheet Check",
+          url: "/anomoly/attendence/stud_check",
+      }
       ]
 
     return (

src/Components/CustomQueryExecutorCard.jsx

@@ -464,7 +464,7 @@ const CustomQueryExecutorCard = ({
   };
 
   return (
-    <Box className="w-100 rounded shadow mb-5 bg-white">
+    <Box className="w-100 rounded shadow mb-5 white-background" id={imageName}>
       <ToastContainer/>
       <Box className="p-4 d-flex justify-content-between align-items-start">
         <Box className="p-1">

src/Components/Home.jsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import HomepageCard from "./HomepageCard";
 import {useState,useEffect} from "react"
+import Notification  from "./Notification";
 
 const Home = () => {
   const cards = [

src/Components/IndividualStudAttendence.jsx

@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from "react";
+import { Box, Button } from "@mui/material";
+import AntdesignLayout from "./AntdesignLayout";
+import LoadingContainer from "./LoadingContainer";
+import infinity_loader from "../../assets/Infinity_loader.gif";
+import Notification from "./Notification"; // Import the Notification component
+import { Height } from "@mui/icons-material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+
+const IndividualStudAttendence = () => {
+  const [registerNumber, setRegisterNumber] = useState(null);
+  const [subjectCode, setSubjectCode] = useState(null);
+  const [attendenceSerialNo, setAttendenceSerialNo] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [attendenceResults, setAttendenceResults] = useState(null);
+  const [zoomValue, setZoomValue] = useState(950);
+  const [absentStatus, setAbsentStatus] = useState(-1);
+  const [notification, setNotification] = useState(null); // Notification state
+  const [type, setType] = useState(null);
+
+  const showNotification = (message, type) => {
+    setNotification({ message, type });
+  };
+
+  const updateStudentStatus = async () => {
+    setIsLoading(true);
+    try {
+      const payload = {
+        attendenceResults,
+        absentStatus,
+        attendenceSerialNo,
+        register_number: registerNumber,
+        subject_code: subjectCode,
+      };
+
+      const response = await fetch(
+        `${
+          import.meta.env.VITE_REACT_APP_BACKEND_URL
+        }/updateStudentAttendenceStatus`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+
+      const responseData = await response.json();
+      console.log("The response data ===== ", responseData);
+
+      if (responseData?.status === "success") {
+        fetchAttendenceData();
+        showNotification("Record updated successfully !!", "success");
+      }
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      console.error("Error updating student status:", error);
+      showNotification("Error updating student status", "error");
+    }
+  };
+
+  useEffect(() => {
+    console.log("Absent status changed ==== ", absentStatus);
+    if (Number(absentStatus) === 0 || Number(absentStatus) === 1) {
+      updateStudentStatus();
+    }
+  }, [absentStatus]);
+
+  const fetchAttendenceData = async () => {
+    setAbsentStatus(-1);
+    if (!attendenceSerialNo) {
+      if (!registerNumber || !subjectCode) {
+        showNotification(
+          "Registration Number && Subject Code is Mandatory !!",
+          "error"
+        );
+        return;
+      }
+    }
+    if (registerNumber && subjectCode) {
+      setType(1);
+    } else if (attendenceSerialNo) {
+      setType(2);
+    }
+    setIsLoading(true);
+    try {
+      const payload = {
+        registerNumber,
+        subjectCode,
+        attendenceSerialNo,
+      };
+
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchAttendenceData`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+
+      const responseData = await response.json();
+      console.log("response data ========= ", responseData);
+      setIsLoading(false);
+      if (responseData?.status === "success") {
+        setAttendenceResults(responseData?.results);
+        setType(responseData?.type)
+      }
+    } catch (error) {
+      setIsLoading(false);
+      console.error("Error fetching attendance data:", error);
+      showNotification("Error fetching attendance data", "error");
+    }
+  };
+
+  return (
+    <AntdesignLayout>
+      <Box className="d-flex justify-content-center w-100 gap-3 align-items-center">
+        <div className="mb-3">
+          <label htmlFor="exampleFormControlInput1" className="form-label">
+            Register Number:
+          </label>
+          <input
+            type="text"
+            className="form-control p-3"
+            id="exampleFormControlInput1"
+            placeholder="Eg : 202385510254788"
+            onChange={(e) => setRegisterNumber(e.target.value)}
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="exampleFormControlInput1" className="form-label">
+            Subject Code:
+          </label>
+          <input
+            type="text"
+            className="form-control p-3"
+            id="exampleFormControlInput1"
+            placeholder="Eg : E1TL11"
+            onChange={(e) => setSubjectCode(e.target.value)}
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="exampleFormControlInput1" className="form-label">
+            Attendence Serial No:
+          </label>
+          <input
+            type="text"
+            className="form-control p-3"
+            id="exampleFormControlInput1"
+            placeholder=""
+            onChange={(e) => setAttendenceSerialNo(e.target.value)}
+          />
+        </div>
+        <button
+          type="button"
+          className="btn btn-primary btn-sm px-4 h-75"
+          onClick={fetchAttendenceData}
+        >
+          Submit
+        </button>
+      </Box>
+      {attendenceResults?.length > 0 && (
+        <Box className="d-flex justify-content-center gap-5 mx-5">
+          <Box className="text-left" style={{ maxWidth: "500px" }}>
+            {Object.keys(attendenceResults[0]).map((key, index) => (
+              <Box key={index}>
+                <strong>
+                  {key} : {attendenceResults[0][key]}
+                </strong>
+              </Box>
+            ))}
+            {type === 1 && (
+              <Box className="d-flex gap-3 my-3">
+                <Button
+                  className="btn bg-primary rounded text-white p-3"
+                  onClick={() => setAbsentStatus(1)}
+                >
+                  Mark As Absent
+                </Button>
+                <Button
+                  className="btn bg-primary rounded text-white p-3"
+                  onClick={() => setAbsentStatus(0)}
+                >
+                  Mark As Present
+                </Button>
+              </Box>
+            )}
+          </Box>
+          <Box>
+            <Box className="d-flex justify-content-end gap-3 my-3">
+              <Button
+                className="btn bg-primary rounded text-white p-3"
+                onClick={() => setZoomValue((prev) => prev + 50)}
+              >
+                <ZoomInIcon />
+              </Button>
+              <Button
+                className="btn bg-primary rounded text-white p-3"
+                onClick={() => setZoomValue((prev) => prev - 50)}
+              >
+                <ZoomOutIcon />
+              </Button>
+            </Box>
+            <Box
+              id="image-container"
+              className="overflow-auto d-flex flex-column"
+              style={{ height: `${type === 1 ? "80vh" : ""}` }}
+            >
+              {attendenceResults.length > 0 && type === 2 && (
+                <img
+                  src={`https://docs.exampaper.vidh.ai/${attendenceResults[0]?.s3_image_path}`}
+                  width={`${zoomValue}px`}
+                  alt="Attendence-image"
+                />
+              )}
+              {attendenceResults.length > 0 && type === 1 && (
+                <img
+                  src={`https://docs.exampaper.vidh.ai/${attendenceResults[0]?.s3_path}`}
+                  width={`${zoomValue}px`}
+                  alt="Attendence-image"
+                />
+              )}
+            </Box>
+          </Box>
+        </Box>
+      )}
+      {attendenceResults?.length == 0 && (
+        <Box className="my-3">Attendence Record Not Found !!</Box>
+      )}
+      {isLoading && <LoadingContainer />}
+      {notification && (
+        <Notification
+          message={notification.message}
+          type={notification.type}
+          onClose={() => setNotification(null)}
+        />
+      )}
+    </AntdesignLayout>
+  );
+};
+
+export default IndividualStudAttendence;

src/Components/Notification.jsx

@@ -0,0 +1,117 @@
+// // import React, { useEffect, useState } from 'react';
+// // import PropTypes from 'prop-types';
+
+// // const Notification = ({ message, type, onClose, duration }) => {
+// //   const [visible, setVisible] = useState(true);
+
+// //   useEffect(() => {
+// //     const timer = setTimeout(() => {
+// //       setVisible(false);
+// //       setTimeout(onClose, 300); // Allow time for the fade-out transition
+// //     }, duration);
+
+// //     return () => clearTimeout(timer);
+// //   }, [onClose, duration]);
+
+// //   return (
+// //     <div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
+// //       {message}
+// //     </div>
+// //   );
+// // };
+
+// // Notification.propTypes = {
+// //   message: PropTypes.string.isRequired,
+// //   type: PropTypes.string,
+// //   onClose: PropTypes.func.isRequired,
+// //   duration: PropTypes.number
+// // };
+
+// // Notification.defaultProps = {
+// //   type: 'info',
+// //   duration: 1000 // Set duration to 1000 milliseconds (1 second)
+// // };
+
+// // export default Notification;
+
+
+// import React, { useEffect, useState } from 'react';
+// import PropTypes from 'prop-types';
+
+// const Notification = ({ message, type, onClose, duration }) => {
+//   const [visible, setVisible] = useState(true);
+//   console.log("From notification container ....")
+
+//   useEffect(() => {
+//     const timer = setTimeout(() => {
+//       setVisible(false);
+//       setTimeout(onClose, 300); // Allow time for the fade-out transition
+//     }, duration);
+
+//     return () => clearTimeout(timer);
+//   }, [onClose, duration]);
+
+//   return (
+//     visible && (
+//       <div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
+//         {message}
+//       </div>
+//     )
+//   );
+// };
+
+// Notification.propTypes = {
+//   message: PropTypes.string.isRequired,
+//   type: PropTypes.string,
+//   onClose: PropTypes.func.isRequired,
+//   duration: PropTypes.number
+// };
+
+// Notification.defaultProps = {
+//   type: 'info',
+//   duration: 3000 // Set duration to 3000 milliseconds (3 seconds)
+// };
+
+// export default Notification;
+
+
+
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const Notification = ({ message, type, onClose, duration }) => {
+  const [visible, setVisible] = useState(true);
+  console.log("From notification container ....");
+
+  useEffect(() => {
+    console.log("Notification useEffect triggered ....");
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onClose, 300); // Allow time for the fade-out transition
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [onClose, duration]);
+
+  return (
+    visible && (
+      <div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
+        {message}
+      </div>
+    )
+  );
+};
+
+Notification.propTypes = {
+  message: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  duration: PropTypes.number
+};
+
+Notification.defaultProps = {
+  type: 'info',
+  duration: 3000 // Set duration to 3000 milliseconds (3 seconds)
+};
+
+export default Notification;

src/Components/PlayGroundEditContainer.jsx

@@ -10,10 +10,11 @@ import TextInputField from "./TextInputField";
 import { Height } from "@mui/icons-material";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import LoadingContainer from "./LoadingContainer";
-//import { toast } from "react-toastify";
+import { toast } from "react-toastify";
 import { updatePlayGroundAttendence } from "./Utilities/AttendencePlaygroundUtilities";
 import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";
-
+import Notification from "./Notification"; // Import the Notification component
+import { ToastContainer } from "react-toastify";
 
 const PlayGroundEditContainer = ({
   data,
@@ -36,29 +37,94 @@ const PlayGroundEditContainer = ({
   const [isLoading, setIsLoading] = useState(false);
   const [qrcode, setQrcode] = useState(null);
   const [subjectCode, setSubjectCode] = useState(null);
+  const [marksR1, setMarksR1] = useState(null);
+  const [marksR2, setMarksR2] = useState(null);
   const [open, setOpen] = useState(true); // Set open state to true by default
+
+  const [notification, setNotification] = useState(null); // Notification state
+
+  const showNotification = (message, type) => {
+    console.log("setting notification ===== ", message);
+    const notificationData = { message, type}
+    console.log("notification data ==== ",notificationData)
+    setNotification(notificationData);
+  };
   const handleClose = () => {
     setOpen(false);
   };
-  console.log("image_name ======================= ", imageName)
+  console.log("image_name ======================= ", imageName);
+  console.log("data === i ==== ", data);
   useEffect(() => {
-    if (data) {
+    const fetchImageData = async () => {
-      setQrcode(data?.qrcode);
+      setIsLoading(true)
-      setBarcode(data?.barcode);
+      try{
-      setMarks(data?.marks);
+      if (data) {
-      setSubjectCode(data?.subject_code);
+        const payload = {
-      setRegisterNumber(data?.register_number);
+          type,
-      setTotalAbsent(data?.total_absent)
+          imageName,
-      setTotalPresent(data?.total_present)
+          tableName,
-      setTotalStudents(data?.total_students)
+        };
+        const response = await fetch(
+          `${
+            import.meta.env.VITE_REACT_APP_BACKEND_URL
+          }/fetchTableImageNameData`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(payload),
+          }
+        );
+        const responseData = await response.json();
+        setIsLoading(false)
+        console.log("response data {{{{ ", responseData);
+        if (responseData.status === "success") {
+          const imageData = responseData?.results;
+          if (imageData && imageData?.length > 0) {
+            const imageDataEle = imageData[0];
+            setQrcode(imageDataEle?.qrcode);
+            setBarcode(imageDataEle?.barcode);
+            setMarks(imageDataEle?.marks);
+            setMarksR1(imageDataEle?.marks_R1);
+            setMarksR2(imageDataEle?.marks_R2);
+            setSubjectCode(imageDataEle?.subject_code);
+            setRegisterNumber(imageDataEle?.register_number);
+            setTotalAbsent(imageDataEle?.total_absent);
+            setTotalPresent(imageDataEle?.total_present);
+            setTotalStudents(imageDataEle?.total_students);
+          }
+        }
+      }
+    }catch(error){
+      throw new Error(error)
+      setIsLoading(false)
     }
+    };
+    fetchImageData()
     console.log("the currect editor type: ", type);
   }, [data]);
 
+  // useEffect(() => {
+  //   if (data) {
+  //         setQrcode(data?.qrcode);
+  //         setBarcode(data?.barcode);
+  //         setMarks(data?.marks);
+  //         setMarksR1(data?.marks_R1);
+  //         setMarksR2(data?.marks_R2);
+  //         setSubjectCode(data?.subject_code);
+  //         setRegisterNumber(data?.register_number);
+  //         setTotalAbsent(data?.total_absent);
+  //         setTotalPresent(data?.total_present);
+  //         setTotalStudents(data?.total_students);
+  //   }
+  //   console.log("the currect editor type: ", type);
+  // }, [data]);
+
   const updateRecordPartC = async () => {
-    if (!marks) {
+    // if (!marks) {
-      return;
+    //   return;
-    }
+    // }
     setIsLoading(true);
     try {
       const payload = {
@@ -68,6 +134,8 @@ const PlayGroundEditContainer = ({
         s3Path,
         subjectCode,
         marks,
+        marksR1,
+        marksR2,
         imageName,
         rotateAngle,
       };
@@ -85,21 +153,28 @@ const PlayGroundEditContainer = ({
       setIsLoading(false);
       console.log("response data ========= ", responseData);
       if (responseData?.status === "success") {
-        //toast.success("Record Updated Successfully ...");
+        showNotification("Record updated successfully !!", "success");
         setShowEditContainer(false);
+        const queryContainerEle = document.getElementById(imageName)
+        console.log("querycontainerEle ===== ",queryContainerEle)
+        if(queryContainerEle){
+          queryContainerEle.classList.add("grey-background")
+          toast.success("Record Updated Successfully !!")
+        }
       }
     } catch (error) {
       setIsLoading(false);
-      //toast.error("Something Went Wrong ...");
+      showNotification("Something Went Wrong !!", "error");
       throw new Error(error);
     }
   };
 
   const updateRecordPartA = async () => {
+    setNotification({})
     console.log(registerNumber);
     console.log(subjectCode);
     console.log(barcode, qrcode);
-    console.log("image_name = ", imageName)
+    console.log("image_name = ", imageName);
     console.log(!registerNumber && !subjectCode && (!barcode || !qrcode));
     if (!registerNumber && !subjectCode && (!barcode || !qrcode)) {
       return;
@@ -128,10 +203,18 @@ const PlayGroundEditContainer = ({
       );
       const responseData = await response.json();
       setIsLoading(false);
-      console.log("response data ========= ", responseData);
+      console.log("response data  122 ========= ", responseData);
       if (responseData?.status === "success") {
-        toast.success("Record Updated Successfully ...");
+        showNotification("Record updated successfully !!", "success");
         setShowEditContainer(false);
+        const queryContainerEle = document.getElementById(imageName)
+        console.log("querycontainerEle ===== ",queryContainerEle)
+        if(queryContainerEle){
+          queryContainerEle.classList.add("grey-background")
+        }
+        setTimeout(()=>{
+          showNotification("Record Updated Successfully !!","success")
+        },500)
       }
     } catch (error) {
       setIsLoading(false);
@@ -155,8 +238,9 @@ const PlayGroundEditContainer = ({
       style={{ zIndex: 100 }}
       fullWidth
     >
+      <ToastContainer/>
       <DialogContent>
-        <Box className="d-flex justify-content-between align-items-start gap-4">
+        <Box className="d-flex justify-content-between align-items-center gap-4">
           <Box className="d-flex flex-column" style={imageStyle}>
             <img
               src={`https://docs.exampaper.vidh.ai/${s3Path}`}
@@ -213,11 +297,23 @@ const PlayGroundEditContainer = ({
               </>
             )}
             {type == "PartC" ? (
-              <TextInputField
+              <>
-                value={marks}
+                <TextInputField
-                setValue={setMarks}
+                  value={marks}
-                placeholder={"Marks"}
+                  setValue={setMarks}
-              />
+                  placeholder={"Marks"}
+                />
+                <TextInputField
+                  value={marksR1}
+                  setValue={setMarksR1}
+                  placeholder={"Marks R1"}
+                />
+                <TextInputField
+                  value={marksR2}
+                  setValue={setMarksR2}
+                  placeholder={"Marks R2"}
+                />
+              </>
             ) : type == "PartA" ? (
               <TextInputField
                 value={registerNumber}
@@ -268,6 +364,13 @@ const PlayGroundEditContainer = ({
         </Box>
       </DialogContent>
       {isLoading && <LoadingContainer />}
+      {notification && (
+        <Notification
+          message={notification.message}
+          type={notification.type}
+          onClose={() => setNotification(null)}
+        />
+      )}
     </Dialog>
   );
 };

src/Components/UpdatedPlaygroundUpdater.jsx

@@ -58,7 +58,9 @@ const UpdatedPlaygroundUpdater = ({
   const [bar_code, set_Barcode] = useState(null);
   const [s3Path, setS3Path] = useState(null);
   const [subjectCode, setSubjectCode] = useState(null);
-  const [data,setData] = useState(null)
+  const [data, setData] = useState(null);
+  const [marksR1, setMarksR1] = useState(null);
+  const [marksR2, setMarksR2] = useState(null);
 
   const [open, setOpen] = useState(true); // Set open state to true by default
   const handleClose = () => {
@@ -68,10 +70,10 @@ const UpdatedPlaygroundUpdater = ({
   useEffect(() => {
     console.log("data ========== ", data);
     if (data) {
-      console.log("barcode = ", data.barcode)
+      console.log("barcode = ", data.barcode);
       setQrcode(data.qrcode);
       // set_Barcode(data.barcode)
-      set_Barcode(data.barcode === '' ? null : data.barcode);
+      set_Barcode(data.barcode === "" ? null : data.barcode);
       setMarks(data.marks);
       setS3Path(data.s3_path);
       setSubjectCode(data.subject_code);
@@ -88,7 +90,6 @@ const UpdatedPlaygroundUpdater = ({
   //   console.log("barcode in use effect ==== ", barcode);
   // }, [barcode]);
 
-
   console.log("data =================== ", data);
   // console.log("image column ====== ", s3_image_column);
   // console.log("s3 image ======= ", data[s3_image_column]);
@@ -492,7 +493,7 @@ const UpdatedPlaygroundUpdater = ({
   useEffect(() => {
     if (oldData?.image_name && tableName) {
       const fetchPrimaryKeyData = async () => {
-        setIsLoading(true)
+        setIsLoading(true);
         try {
           const payload = {
             table: tableName,
@@ -510,7 +511,7 @@ const UpdatedPlaygroundUpdater = ({
           );
           const responseData = await response.json();
           console.log("response json 11 === ", responseData);
-          setIsLoading(false)
+          setIsLoading(false);
           if (responseData?.status === "success") {
             const results = responseData?.data;
             console.log("results ==== ", results);
@@ -520,7 +521,7 @@ const UpdatedPlaygroundUpdater = ({
             }
           }
         } catch (error) {
-          setIsLoading(false)
+          setIsLoading(false);
           throw new Error(error);
         }
       };
@@ -590,7 +591,7 @@ const UpdatedPlaygroundUpdater = ({
             />
           </Box>
         </Box>
-        
+
         {/* <Box
           className="d-flex flex-column gap-2 mx-2 py-3"
           style={{ minWidth: "250px" }}
@@ -640,17 +641,17 @@ const UpdatedPlaygroundUpdater = ({
           {type !== "Attendence" ? (
             <>
               <TextInputField
-                value={qrcode || ''}
+                value={qrcode || ""}
                 setValue={setQrcode}
                 placeholder={"QR code"}
               />
               <TextInputField
-                value={bar_code || ''}
+                value={bar_code || ""}
                 setValue={set_Barcode}
                 placeholder={"BarCode"}
               />
               <TextInputField
-                value={subjectCode || ''}
+                value={subjectCode || ""}
                 setValue={setSubjectCode}
                 placeholder={"Subject code"}
               />
@@ -685,36 +686,38 @@ const UpdatedPlaygroundUpdater = ({
             </>
           )}
           {type == "PartC" ? (
-            <TextInputField
+            <>
-              value={marks}
+              <TextInputField
-              setValue={setMarks}
+                value={marks}
-              placeholder={"Marks"}
+                setValue={setMarks}
-            />
+                placeholder={"Marks"}
+              />
+            </>
           ) : type == "PartA" ? (
             <TextInputField
-              value={registerNumber || ''}
+              value={registerNumber || ""}
               setValue={setRegisterNumber}
               placeholder={"Register no"}
             />
           ) : null}
-            <Box display="flex" justifyContent="space-between">
+          <Box display="flex" justifyContent="space-between">
-              <Button
+            <Button
-                className="m-0 bg-primary text-white p-3 rounded"
+              className="m-0 bg-primary text-white p-3 rounded"
-                onClick={rotateLeft}
+              onClick={rotateLeft}
-              >
+            >
-                Rotate left
+              Rotate left
-                <RotateLeftIcon />
+              <RotateLeftIcon />
-              </Button>
+            </Button>
 
-              <Button
+            <Button
-                className="m-0 bg-primary text-white p-3 rounded"
+              className="m-0 bg-primary text-white p-3 rounded"
-                onClick={rotateRight}
+              onClick={rotateRight}
-              >
+            >
-                Rotate Right
+              Rotate Right
-                <RotateRightIcon />
+              <RotateRightIcon />
-              </Button>
+            </Button>
-            </Box>
+          </Box>
-            {/* <Button
+          {/* <Button
               className="m-0 bg-primary text-white p-3 rounded"
               onClick={() =>
                 saveRotatedImage(
@@ -764,8 +767,6 @@ const UpdatedPlaygroundUpdater = ({
           ) : null}
           {/* <Button className="bg-primary text-white p-3">Skip</Button> */}
 
-          
-
           <Box className="d-flex justify-content-between gap-5">
             <Button
               className="bg-primary text-white p-3 w-50"