latest

.env

@@ -1,5 +1,5 @@
 #VITE_REACT_APP_BACKEND_URL="https://sandbox.exampaper.vidh.ai"
 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="http://localhost:9999"
 VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"

src/App.jsx

@@ -27,6 +27,9 @@ import QrcodeCardEditor from "./Components/QrCodeCardEditor";
 import StudentResultsData from "./Components/StudentsResultsData";
 import PlayGrounds from "./Components/PlayGrounds";
 import PlayGround from "./Components/PlayGround";
+import Revaluation from "./Components/Revaluation";
+import PlayGroundUpdated from "./Components/PlaygroundUpdated"
+
 
 function App() {
   return (
@@ -40,6 +43,8 @@ function App() {
           <Route path="/studentsDetails" element={<StudentResultsData/>}></Route>
           <Route path="/Playgrounds" element={<PlayGrounds/>}></Route>
           <Route path="/Playground/:type" element={<PlayGround/>}></Route>
+          <Route path="/revaluation" element={<Revaluation/>}></Route>
+          <Route path="/playground/updated/:type" element={<PlayGroundUpdated/>}></Route>
           <Route
             path="/anomoly/attendence/reassigned"
             element={<AnomolyReassigned />}

src/Components/BarcodeScanner.jsx

@@ -21,9 +21,11 @@ const BarcodeScanner = () => {
     });
 
     const fetchBarcodeData = () => {
+      console.log("fetching barcode data ......",scanResult)
       if (!scanResult) {
         return;
       }
+      console.log("fetching barcode data ......")
       setIsLoading(true);
       setMarksData([])
       setBarcodeInfo([])
@@ -47,6 +49,7 @@ const BarcodeScanner = () => {
           .then((response) => response.json())
           .then((responseData) => {
             setIsLoading(false);
+            console.log("fetchbarcodedata result ===== ",responseData)
             if (responseData.status === "success") {
               setBarcodeInfo(responseData.results);
               setMarksData(responseData?.marks);
@@ -87,7 +90,7 @@ const BarcodeScanner = () => {
 
   const reinitializeScanner = () => {
     console.log("calling reinitialize scanner ......")
-    setScanResult(null);
+    // setScanResult(null);
     setBarcodeInfo([]);
     setMarksData([]);
     // if (document.getElementById("reader")) {
@@ -104,7 +107,7 @@ useEffect(()=>{
 
 
   useEffect(() => {
-    console.log("Calling the use effect ..... scan result changed ...")
+    console.log("Calling the use effect ..... scan result changed ...",scanResult)
     if (!scanResult) {
       const readerEle = document.getElementById("reader");
       console.log("Reader ELe ===== ", readerEle);

src/Components/Home.jsx

@@ -43,7 +43,11 @@ const Home = () => {
     {
       title:"PlayGrounds",
       url:"/Playgrounds"
-    }
+    },
+    // {
+    //   title:"Revaluation",
+    //   url:"/revaluation"
+    // },
     // {
     //   title:"Marks Verfication",
     //   url:"/part-c/marks/verify"

src/Components/PartAReassigned.jsx

@@ -32,6 +32,9 @@ import {
 } from "react-redux";
 import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
 import SystemNumberDialog from "./SystemNumberDialog";
+import FormControl from "@mui/material/FormControl";
+import Select, { selectClasses } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 
 const { Header, Content, Footer, Sider } = Layout;
 function getItem(label, key, icon, children) {
@@ -49,9 +52,11 @@ const PartAReassigned = () => {
   const [collapsed, setCollapsed] = useState(false);
   const [anomolyData, setAnomolyData] = useState([]);
   const [tableRowData, setTableRowData] = useState([]);
+  const [selectedDegreeType, setSelectedDegreeType] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   let [searchParams, setSearchParams] = useSearchParams();
+
   const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);
   const searchParamsType = searchParams.get("type");
   const dispatch = useDispatch();
@@ -60,6 +65,27 @@ const PartAReassigned = () => {
   );
   const reduxSystemNo = useSelector((state) => state?.systemNumber);
   console.log("Redux partA 2023 anomoly data : ", reduxPartA2023AnomolyData);
+  const degreeTypes = [
+    { type: "NON VOCATIONAL", type_code: "0" },
+    { type: "VOCATIONAL", type_code: "6" },
+  ];
+
+  const handleDegreeTypeChange = (e) => {
+    const newDegreeType = e.target.value;
+    console.log("Value ===== ", newDegreeType);
+    setSelectedDegreeType(newDegreeType);
+    // dispatch(updatePartCDegreeType(newDegreeType));
+  };
+
+  useEffect(() => {
+    if (!selectedDegreeType) {
+      setSelectedDegreeType("0");
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log("Selected degree type in use Effect === ", selectedDegreeType);
+  }, [selectedDegreeType]);
 
   useEffect(() => {
     if (!reduxSystemNo) {
@@ -77,7 +103,10 @@ const PartAReassigned = () => {
       //     localstorageRecords = JSON.parse(localstorageRecords);
       //   }
       // }
-      fetchAnomalyData(reduxSystemNo)
+      if (selectedDegreeType) {
+        fetchAnomalyData(reduxSystemNo);
+      }
+
       // if (localstorageRecords && localstorageRecords.length > 0) {
       //   console.log(
       //     "Length of local storage records is high so aborting fetching ..."
@@ -112,7 +141,7 @@ const PartAReassigned = () => {
       //   const sytemData = localStorage.get("part-a-old-anomoly")
       // }
     }
-  }, [reduxSystemNo]);
+  }, [reduxSystemNo, selectedDegreeType]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -157,7 +186,7 @@ const PartAReassigned = () => {
   const updateSystemReservationStatus = async (systemRecords) => {
     const payload = {
       systemRecords,
-      sysNo:reduxSystemNo
+      sysNo: reduxSystemNo,
     };
     try {
       fetch(
@@ -187,7 +216,7 @@ const PartAReassigned = () => {
     fetch(
       `${
         import.meta.env.VITE_REACT_APP_BACKEND_URL
-      }/fetchAnamolyPartAData?type=${searchParamsType}&sysNo=${reduxSystemNo}`,
+      }/fetchAnamolyPartAData?type=${searchParamsType}&sysNo=${reduxSystemNo}&degreeType=${selectedDegreeType}`,
       {
         method: "GET",
         headers: {
@@ -203,15 +232,15 @@ const PartAReassigned = () => {
         console.log("Response Data is : ", responseData);
         setIsLoading(false);
         if (responseData.status === "success") {
-          console.log("System record ====== ",responseData.systemRecord)
+          console.log("System record ====== ", responseData.systemRecord);
-          var systemRecords = responseData?.data
+          var systemRecords = responseData?.data;
-          if(!responseData.systemRecord){
+          if (!responseData.systemRecord) {
             systemRecords = getRecordsBySystemId(
               responseData?.data,
               reduxSystemNo
             );
           }
-          updateSystemReservationStatus(systemRecords);
+          //updateSystemReservationStatus(systemRecords);
           console.log("System records : ", systemRecords);
           if (searchParamsType === "old") {
             localStorage.setItem(
@@ -351,6 +380,22 @@ const PartAReassigned = () => {
             margin: "16px 16px",
           }}
         >
+          <Box className="w-25 text-left">
+            <h6>Degree Type</h6>
+            <FormControl fullWidth>
+              <Select
+                className="bg-white"
+                value={selectedDegreeType}
+                onChange={handleDegreeTypeChange}
+              >
+                {degreeTypes.map((degree) => (
+                  <MenuItem key={degree.type_code} value={degree.type_code}>
+                    {degree.type}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
           <Box className="w-100 d-flex justify-content-between">
             <Box className="w-100 d-flex justify-content-center">
               {tableRowData.length > 0 && (

src/Components/PlayGroundEditContainer.jsx

@@ -10,7 +10,7 @@ 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";
 
@@ -85,12 +85,12 @@ const PlayGroundEditContainer = ({
       setIsLoading(false);
       console.log("response data ========= ", responseData);
       if (responseData?.status === "success") {
-        toast.success("Record Updated Successfully ...");
+        //toast.success("Record Updated Successfully ...");
         setShowEditContainer(false);
       }
     } catch (error) {
       setIsLoading(false);
-      toast.error("Something Went Wrong ...");
+      //toast.error("Something Went Wrong ...");
       throw new Error(error);
     }
   };
@@ -129,12 +129,12 @@ const PlayGroundEditContainer = ({
       setIsLoading(false);
       console.log("response data ========= ", responseData);
       if (responseData?.status === "success") {
-        toast.success("Record Updated Successfully ...");
+        //toast.success("Record Updated Successfully ...");
         setShowEditContainer(false);
       }
     } catch (error) {
       setIsLoading(false);
-      toast.error("Something Went Wrong ...");
+      //toast.error("Something Went Wrong ...");
       throw new Error(error);
     }
   };

src/Components/PlayGrounds.jsx

@@ -16,6 +16,10 @@ const PlayGrounds = () => {
       title: "ATTENDENCE",
       url: "/Playground/Attendence",
     },
+    {
+      title: "Part - A Updated",
+      url: "/Playground/updated/PartA",
+    },
   ];
   return (
     <>

src/Components/PlaygroundUpdated.jsx

@@ -0,0 +1,413 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  DesktopOutlined,
+  FileOutlined,
+  PieChartOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
+import { ToastContainer, toast } from "react-toastify";
+import { Box, Button } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import EditButton from "./EditButton";
+import { width } from "@mui/system";
+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 RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import {
+  updatePartAanomolyData,
+  updatePlaygroundCurrentPage,
+  updatePlaygroundResults,
+  updatePlaygroundTotalPages,
+  updateSystemNo,
+} from "../redux/actions/actions";
+import { Select } from "antd";
+
+import CustomQueryExecutorCard from "./CustomQueryExecutorCard";
+import SimpleDialog from "./SimpleDialog";
+import SystemNumberDialog from "./SystemNumberDialog";
+import ValidationContainer from "./ValidationContainer";
+import QueryExecutorCard from "./QueryExecutorCard";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import QueryExecutortextArea from "./QueryExecutortextArea";
+import AntdesignLayout from "./AntdesignLayout";
+import TextInputField from "./TextInputField";
+import { render } from "react-dom";
+import { updatePlaygroundQuery } from "../redux/actions/actions";
+import { useSelector, useDispatch } from "react-redux";
+import PlayGrounds from "./PlayGrounds";
+import { useParams } from "react-router-dom";
+import UpdatedPlaygroundUpdater from "./UpdatedPlaygroundUpdater";
+
+const { Header, Content, Footer, Sider } = Layout;
+const PlayGroundUpdated = () => {
+  const { type } = useParams();
+
+  console.log("Backend URL:", import.meta.env.VITE_REACT_APP_BACKEND_URL);
+
+  console.log("Type ============= ", type);
+  const [tableName, setTableName] = useState(null);
+  const tableType = {
+    PartA: "ocr_scanned_part_a_v1",
+    PartC: "ocr_scanned_part_c_v1",
+    Attendence: "attendence_scanned_data",
+  };
+
+  useEffect(() => {
+    console.log("use effect type 123==== ", type);
+    console.log("use effect table name ===== ", tableName);
+    console.log("table name ==== ", tableType[type]);
+    if (!tableName) {
+      setTableName(tableType[type]);
+    }
+  }, [type, tableName]);
+
+  const [cardData, setCardData] = useState({});
+  const [responseData, setResponseData] = useState(null);
+  const [totalData, setTotalData] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [imageColumn, setImageColumn] = useState(null);
+  const [dataFetched, setDataFetched] = useState(false);
+  const [currentCardIndex, setCurrentCardIndex] = useState(0);
+  const [query, setQuery] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [paginationPages, setPaginationPages] = useState(null);
+  const [limit, setLimit] = useState("");
+  const recordsPerPage = 50;
+  const resultsContainerRef = useRef();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const reduxPlaygroundQuery = useSelector((state) => state?.playGroundQuery);
+  const reduxPlaygroundPageNo = useSelector(
+    (state) => state?.playGroundCurrentPage
+  );
+  const reduxPlaygroundTotalPages = useSelector(
+    (state) => state?.playGroundtotalPages
+  );
+  const reduxPlaygroundResults = useSelector(
+    (state) => state?.playGroundResults
+  );
+  console.log("Redux playground query : ", reduxPlaygroundQuery);
+  console.log("Redux playground page no : ", reduxPlaygroundPageNo);
+  console.log("Redux playground total pages : ", reduxPlaygroundTotalPages);
+  console.log("Redux playground resutls : ", reduxPlaygroundResults);
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  useEffect(() => {
+    if (reduxPlaygroundQuery && !query) {
+      setQuery(reduxPlaygroundQuery);
+    }
+  }, [reduxPlaygroundQuery]);
+
+  useEffect(() => {
+    if (reduxPlaygroundPageNo != 0 && totalPages == 0) {
+      setTotalPages(reduxPlaygroundTotalPages);
+    }
+  }, [reduxPlaygroundTotalPages]);
+
+  useEffect(() => {
+    console.log("1234  ---- useEffect");
+
+    if (totalData?.length == 0 && reduxPlaygroundResults) {
+      console.log("Redux playground results if ...");
+      console.log(
+        "reduxPlaygroundResults.type === type ",
+        reduxPlaygroundResults.type === type
+      );
+      if (reduxPlaygroundResults.type === type) {
+        console.log("Into if ...");
+        setTotalData(reduxPlaygroundResults?.data);
+        setImageColumn("s3_path");
+      }
+    }
+  }, [reduxPlaygroundResults]);
+
+  useEffect(() => {
+    if (currentPage == 0 && reduxPlaygroundPageNo !== 0) {
+      console.log("Updating in use effect ============================= >");
+      setCurrentPage(reduxPlaygroundPageNo);
+    }
+  }, [reduxPlaygroundPageNo]);
+
+  const fetchQueryValue = async () => {
+    // console.log("results container ref ===== ", resultsContainerRef);
+    // if (resultsContainerRef) {
+    //   console.log(
+    //     "Results container ref current ===== ",
+    //     resultsContainerRef.current
+    //   );
+    //   resultsContainerRef.current.innerHTML = "";
+    // }
+    if (query.includes("limit")) {
+      alert("Please specify the limit in the input field.");
+      return;
+    }
+    if (query.includes(";")) {
+      alert("Please remove the special character from the query ';'");
+      return;
+    }
+    if (!limit) {
+      alert("Limit cannot be empty !!");
+      return;
+    }
+    if (
+      !query.includes("image_name") &&
+      !query.includes("*") &&
+      query.includes("ocr_scanned_part_c_v1")
+    ) {
+      alert(
+        "Selecting primary Key (image_name) or Selecting all (*) is mandatory"
+      );
+      return;
+    }
+    if (!query.includes(tableName)) {
+      alert(`This playground is only for : ${tableName}`);
+      return;
+    }
+    setIsLoading(true);
+    const payload = {
+      query: query,
+      limit: limit,
+    };
+
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchQueryValue`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      const data = await response.json();
+      setIsLoading(false);
+      if (data.status === "success") {
+        setDataFetched(true);
+        setTotalData(data.results);
+        var tmp = {};
+        tmp.type = type;
+        tmp.data = data?.results;
+        // dispatch(updatePlaygroundResults(data?.results));
+        dispatch(updatePlaygroundResults(tmp));
+        const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
+        setTotalPages(totalPageCount);
+        dispatch(updatePlaygroundTotalPages(totalPages));
+        setCurrentPage(1);
+        setResponseData(data.results.slice(0, recordsPerPage));
+        const totalResults = data?.results;
+        if (totalResults) {
+          if (totalResults?.length > 0) {
+            setCardData(totalResults[0]);
+          }
+        }
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+
+  useEffect(() => {
+    dispatch(updatePlaygroundQuery(query));
+  }, [query]);
+
+  useEffect(() => {
+    if (totalData) {
+      if (totalData.length > 0) {
+        setResponseData([]);
+        console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ");
+        setIsLoading(true);
+        setTimeout(() => {
+          const startIndex = (currentPage - 1) * recordsPerPage;
+          const endIndex = startIndex + recordsPerPage;
+          setResponseData(totalData.slice(startIndex, endIndex));
+          setIsLoading(false);
+        }, 1000);
+      }
+      dispatch(updatePlaygroundCurrentPage(currentPage));
+      renderPagination();
+    }
+  }, [currentPage, totalData]);
+
+  const renderPagination = () => {
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(
+        <span key={i}>
+          {i > 1 && " | "}
+          <a
+            href="#!"
+            onClick={() => setCurrentPage(i)}
+            className={i === currentPage ? "active" : ""}
+          >
+            {i}
+          </a>
+        </span>
+      );
+    }
+    setPaginationPages(pages);
+  };
+
+  useEffect(() => {
+    renderPagination();
+    dispatch(updatePlaygroundTotalPages(totalPages));
+  }, [currentPage, totalPages]);
+
+  useEffect(() => {
+    console.log("current card index use effect ... ", currentCardIndex);
+    if (totalData) {
+      if (totalData.length > 0 && currentCardIndex < totalData.length) {
+        setIsLoading(true);
+        setTimeout(() => {
+          setCardData(totalData[currentCardIndex]);
+          setIsLoading(false);
+        }, 1000);
+      }
+    }
+  }, [currentCardIndex]);
+
+  useEffect(() => {
+    if (totalData?.length > 0) {
+      console.log("Result container ref ===== ", resultsContainerRef.current);
+      resultsContainerRef.current.scrollIntoView();
+      resultsContainerRef.current.scroll;
+      // Adding a slight delay to ensure the element is rendered
+      // setTimeout(() => {
+      //   resultsContainerRef.current.scrollIntoView({ behavior: "smooth" });
+      // }, 100);
+    }
+  }, [totalData]);
+
+  const getTableData = () => {
+    if (totalData.length === 0) {
+      return (
+        <Box className="bg-white rounded p-3 my-3 w-100 h6">
+          No Results Found ...
+        </Box>
+      );
+    }
+
+    const keys = Object.keys(totalData[0]);
+
+    return (
+      <div className="w-100">
+        <div className="my-2 overflow-auto">
+          {responseData ? (
+            responseData.length > 0 ? (
+              <UpdatedPlaygroundUpdater
+                type={type}
+                tableName={tableName}
+                oldData={cardData}
+                currentCardIndex={currentCardIndex}
+                setCurrentCardIndex={setCurrentCardIndex}
+                setCardData={setCardData}
+                totalData={totalData}
+                s3_image_column={imageColumn}
+                query={query}
+              />
+            ) : (
+              <Box>No Results Found ...</Box>
+            )
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+
+  const handleSelect = (e) => {
+    console.log("E ======= ", e);
+    setImageColumn(e);
+  };
+
+  return (
+    <AntdesignLayout>
+      <div className="mx-3">
+        <div className="my-3 d-flex flex-md-row flex-column">
+          <div className="w-100 w-md-75">
+            <QueryExecutortextArea query={query} setQuery={setQuery} />
+          </div>
+          <div className="d-none d-md-block w-25">
+            <div className="w-100 d-flex flex-column gap-2 mx-2">
+              <TextInputField
+                placeholder={"limit"}
+                value={limit}
+                setValue={setLimit}
+              />
+              {totalData && totalData.length > 0 ? (
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
+                  {Object.keys(totalData[0]).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {key}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ) : null}
+
+              <button
+                className="btn bg-primary text-light"
+                id="submit-btn"
+                onClick={fetchQueryValue}
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+
+          <div className="d-block d-md-none w-100">
+            <div className="w-100 d-flex flex-column gap-2">
+              <TextField
+                className="rounded h6 bg-white"
+                type="text"
+                placeholder="Limit"
+                id="limit-input"
+                autoComplete="off"
+                value={limit}
+                onChange={(e) => setLimit(e.target.value)}
+              />
+              {totalData && totalData.length > 0 ? (
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
+                  {Object.keys(totalData[0]).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {key}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ) : null}
+
+              <button
+                className="btn bg-primary text-light"
+                id="submit-btn"
+                onClick={fetchQueryValue}
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          id="results-container"
+          ref={resultsContainerRef}
+          className="d-flex w-100 justify-content-center"
+        >
+          {dataFetched && getTableData()}
+        </div>
+      </div>
+      {isLoading && <LoadingContainer />}
+    </AntdesignLayout>
+  );
+};
+
+export default PlayGroundUpdated;

src/Components/Revaluation.jsx

@@ -0,0 +1,215 @@
+import { Box, Button } from "@mui/material";
+import { useState, useEffect } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import { UserOutlined } from "@ant-design/icons";
+import { Avatar, Space } from "antd";
+import { Drawer, Flex } from "antd";
+import { DownloadOutlined } from "@ant-design/icons";
+
+import TextInputField from "./TextInputField";
+import LoadingContainer from "./LoadingContainer";
+
+const Revaluation = () => {
+  const [registerNumber, setRegisterNumber] = useState(null);
+  const [subjectCode, setSubjectCode] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [studentInfo, setStudentInfo] = useState([]);
+  const [partAInfo, setPartAInfo] = useState([]);
+  const [partCInfo, setPartCInfo] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [size, setSize] = useState("large");
+  const [type,setType] = useState(null)
+
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+  const submitRevaluationAction = async () => {
+    console.log("submitRevalutionResults ....");
+    if (!subjectCode || !registerNumber) {
+      console.log("Returning ...");
+      return;
+    }
+    setIsLoading(true);
+    const payload = {
+      subjectCode,
+      registerNumber,
+    };
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/submitRevalutionResults`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        setStudentInfo(responseData?.studentInfo);
+        setPartAInfo(responseData?.partAInfo);
+        setPartCInfo(responseData?.partCInfo);
+      } else {
+        toast.error("Something went Wrong !!");
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
+  return (
+    <>
+      <ToastContainer />
+      <Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
+        <h1>Welcome to exampaper.vidh.ai</h1>
+      </Box>
+      <Box className="d-flex justify-content-between p-3">
+        {" "}
+        <Box
+          sx={{
+            width: {
+              xs: "100%", // mobile
+              md: "40%", // desktop
+            },
+            marginX: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            my: 5,
+            p: 4,
+          }}
+        >
+          <TextInputField
+            value={registerNumber}
+            setValue={setRegisterNumber}
+            placeholder={"Register Number"}
+          />
+          <TextInputField
+            value={subjectCode}
+            setValue={setSubjectCode}
+            placeholder={"Subject Code"}
+          />
+          <Button
+            className="w-100 bg-primary text-light p-3 rounded"
+            onClick={submitRevaluationAction}
+          >
+            Submit
+          </Button>
+        </Box>
+        {studentInfo.length > 0 && (
+          <Box className="rounded p-5 mx-5 d-flex flex-column gap-2 text-center w-50">
+            <Box className="bg-light shadow p-5">
+              <Box className="my-3 d-flex justify-content-center">
+                <Avatar size={64} icon={<UserOutlined />} />
+              </Box>
+
+              <Box>
+                <strong>Student Name : </strong>
+                {studentInfo[0]?.candidate_name}
+              </Box>
+              <Box>
+                <strong>Register Number : </strong>
+                {studentInfo[0]?.register_number}
+              </Box>
+              <Box>
+                {" "}
+                <strong>Subject Code : </strong>
+                {studentInfo[0]?.subject_code}
+              </Box>
+              <Box>
+                {" "}
+                <strong>Exam Date : </strong>
+                {studentInfo[0]?.exam_date}
+              </Box>
+              <Box>
+                {" "}
+                <strong>Exam Centre Code : </strong>
+                {studentInfo[0]?.exam_centre_code}
+              </Box>
+              <Box>
+                {" "}
+                <strong>Exam Centre : </strong>
+                {studentInfo[0]?.exam_center}
+              </Box>
+            </Box>
+            <Box>
+              {partCInfo && (
+                <Box
+                  className="w-100 bg-white rounded p-3 bg-light my-3 shadow"
+                  onClick={showDrawer}
+                >
+                  Show Part C Data..
+                </Box>
+              )}
+            </Box>
+            <Box>
+              {studentInfo.length > 0 && (
+                <Box className="bg-light p-3 rounded shadow">
+                  <Box>
+                    {" "}
+                    <strong>Barcode 2 : </strong>
+                    {studentInfo[0]?.bar_code2}
+                  </Box>
+                  <Box>
+                    {" "}
+                    <strong>QR code 2 : </strong>
+                    {studentInfo[0]?.qr_code2}
+                  </Box>
+                  <Box>
+                    {" "}
+                    <strong>Barcode 4 : </strong>
+                    {studentInfo[0]?.bar_code4}
+                  </Box>
+                  <Box>
+                    {" "}
+                    <strong>QR code 4 : </strong>
+                    {studentInfo[0]?.qr_code4}
+                  </Box>
+                  <Box className="my-2 d-flex justify-content-end">
+                    <Button className="bg-primary text-white p-2 rounded">
+                      <DownloadOutlined />
+                    </Button>
+                  </Box>
+                </Box>
+              )}
+            </Box>
+            <Box>
+              {partCInfo && (
+                <Box
+                  className="w-100 bg-white rounded p-3 bg-light my-3 shadow"
+                  onClick={showDrawer}
+                >
+                  Show Part A Data..
+                </Box>
+              )}
+            </Box>
+            <Drawer
+              title=""
+              size={'large'}
+              onClose={onClose}
+              open={open}
+            >
+              {partCInfo.length > 0 && (
+                <img
+                  src={`https://docs.exampaper.vidh.ai/${partCInfo[0]?.s3_path}`}
+                  width={"700px"}
+                  height={"auto"}
+                />
+              )}
+            </Drawer>
+          </Box>
+        )}
+        {isLoading && <LoadingContainer />}
+      </Box>
+    </>
+  );
+};
+
+export default Revaluation;

src/Components/UpdatedPlaygroundUpdater.jsx

@@ -0,0 +1,814 @@
+import { Box, Button } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Label, MoreHorizTwoTone, RotateRight } from "@mui/icons-material";
+import { useState, useEffect, useRef } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import LoadingContainer from "./LoadingContainer";
+import { useNavigate } from "react-router-dom";
+// import "react-toastify/dist/ReactToastify.css";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import PlayGroundEditContainer from "./PlayGroundEditContainer";
+import saveRotatedImage from "./Utilities/PartCPlaygroundUtilities";
+import markAsPartc from "./Utilities/PartAPlaygroundUtilities";
+import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";
+import TextInputField from "./TextInputField";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+
+const UpdatedPlaygroundUpdater = ({
+  oldData,
+  s3_image_column,
+  query,
+  error,
+  error_reason,
+  reduxSystemNo,
+  degreeType,
+  type,
+  tableName,
+  currentCardIndex,
+  setCurrentCardIndex,
+  setCardData,
+  totalData,
+}) => {
+  // console.log("ERROR ============= ",error)
+  // console.log("ERROR REASON ============== ",error_reason)
+  // console.log("REDUX SYSTEM NO ================== ",reduxSystemNo)
+  const navigate = useNavigate();
+  const [dataValue, setDataValue] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  //   console.log("data in query executor Card : ", data);
+  const [keys, setKeys] = useState([]);
+  const [values, setValues] = useState([]);
+  const [rotateAngle, setRotateAngle] = useState(0);
+  const [imageName, setImageName] = useState(null);
+  const [tableNameData, setTableNameData] = useState(null);
+  const imageEleRef = useRef();
+  const [showEditContainer, setShowEditContainer] = useState(false);
+  const [editorType, setEditorType] = useState(null);
+  const dialogText = "This is dialog text";
+  const [marks, setMarks] = useState(null);
+  const [registerNumber, setRegisterNumber] = useState(null);
+  const [totalStudents, setTotalStudents] = useState(null);
+  const [totalPresent, setTotalPresent] = useState(null);
+  const [totalAbsent, setTotalAbsent] = useState(null);
+  const [barcode, setBarcode] = useState(null);
+  const [qrcode, setQrcode] = useState(null);
+  const [s3Path, setS3Path] = useState(null);
+  const [subjectCode, setSubjectCode] = useState(null);
+  const [data,setData] = useState(null)
+
+  const [open, setOpen] = useState(true); // Set open state to true by default
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    console.log("data ========== ", data);
+    if (data) {
+      setQrcode(data.qrcode);
+      setBarcode(data.barcode);
+      setMarks(data.marks);
+      setS3Path(data.s3Path);
+      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]);
+
+  useEffect(() => {
+    console.log("barcode in use effect ==== ", barcode);
+  }, [barcode]);
+
+  const updateRecordPartC = async () => {
+    if (!marks) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const payload = {
+        qrcode,
+        barcode,
+        table: tableName,
+        s3Path,
+        subjectCode,
+        marks,
+        imageName,
+        rotateAngle,
+      };
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartCdata`,
+        {
+          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") {
+        //toast.success("Record Updated Successfully ...");
+        setShowEditContainer(false);
+      }
+    } catch (error) {
+      setIsLoading(false);
+      //toast.error("Something Went Wrong ...");
+      throw new Error(error);
+    }
+  };
+
+  console.log("data =================== ", data);
+  // console.log("image column ====== ", s3_image_column);
+  // console.log("s3 image ======= ", data[s3_image_column]);
+  //   console.log("Keys ==== ",keys)
+  //   console.log("Values ===== ",values)
+
+  useEffect(() => {
+    if (data) {
+      console.log("Image name ====== ", data?.image_name);
+      setImageName(data?.image_name);
+    }
+    if (tableName) {
+      setTableNameData(tableName);
+    }
+    if (data?.subject_code) {
+    }
+  }, [data]);
+
+  const updatePartAInstructions = async () => {
+    console.log("update instrunction");
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updatePartAInstructions`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData?.status === "success") {
+        console.log("Updation successfull ....");
+        const updatedData = { ...dataValue, is_backpage: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        // toast.success("Record Marked as Backpage ! ....");
+      } else {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const updatePartAFront = async () => {
+    console.log("update front");
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partAFrontSideMarking`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        console.log("Updation successfull ....");
+        const updatedData = { ...dataValue, is_backpage: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        // toast.success("Record Marked as Backpage ! ....");
+      } else {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const updateFront = async () => {
+    console.log("update front");
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvFrontSideMarking`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        console.log("Updation successfull ....");
+        const updatedData = { ...dataValue, is_backpage: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        toast.success("Record Marked as Frontpage ! ....");
+      } else {
+        toast.error("Something Went Wrong !...");
+        setIsLoading(false);
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const updateBack = async () => {
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvBacksideMarking`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        console.log("Updation successfull ....");
+        const updatedData = { ...dataValue, is_backpage: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        toast.success("Record Marked as Backpage ! ....");
+      } else {
+        setIsLoading(false);
+        toast.error("Something Went Wrong !...");
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const initateProcess = () => {
+    console.log("inititate process..");
+  };
+
+  const rotateLeft = () => {
+    console.log("rotate left .....");
+    const newAngle = rotateAngle - 90;
+    setRotateAngle((prev) => prev - 90);
+    console.log("new angle ....", newAngle);
+    const newStyle = `rotate(${newAngle}deg)`;
+    imageEleRef.current.style.transform = newStyle;
+  };
+
+  const rotateRight = () => {
+    console.log("rotate right");
+    const newAngle = rotateAngle + 90;
+    setRotateAngle((prev) => prev + 90);
+    const newStyle = `rotate(${newAngle}deg)`;
+    imageEleRef.current.style.transform = newStyle;
+  };
+
+  const updateEvCover = async () => {
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        const updatedData = { ...dataValue, is_cover: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        console.log("Updation successfull ....");
+        // toast.success("Record Marked As Ev !...");
+      } else {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const markAsDummy = async () => {
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvDummyMarking`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        const updatedData = { ...dataValue, is_cover: 1 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        console.log("Updation successfull ....");
+        toast.success("Record Marked As Ev !...");
+      } else {
+        setIsLoading(false);
+        toast.error("Something Went Wrong !...");
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      setIsLoading(false);
+      toast.error("Something Went Wrong !...");
+      throw new Error(error);
+    }
+  };
+
+  const showContainerAction = () => {
+    setShowEditContainer(true);
+    console.log("type === ", type);
+    // setEditorType(type)
+  };
+
+  const updateAttendenceBlankAction = () => {
+    updateAttendenceBlank(setIsLoading, data, setShowEditContainer);
+  };
+
+  const buttonActions = {
+    PartC: [
+      { btnLabel: "Mark As Front", action: updateFront },
+      { btnLabel: "Mark As Back", action: updateBack },
+      { btnLabel: "Mark As Ev", action: updateEvCover },
+      { btnLabel: "Mark As Dummy", action: markAsDummy },
+      { btnLabel: "Edit", action: showContainerAction },
+    ],
+    PartA: [
+      { btnLabel: "Mark As Front", action: updatePartAFront },
+      { btnLabel: "Mark As Backpage", action: updatePartAInstructions },
+      // { btnLabel: "Initiate Process", action: initateProcess },
+      { btnLabel: "Mark As Dummy", action: markAsDummy },
+      { btnLabel: "Mark As Part-C", action: markAsPartc },
+      { btnLabel: "Edit", action: showContainerAction },
+    ],
+    Attendence: [
+      { btnLabel: "Mark As Blank", action: updateAttendenceBlankAction },
+      { btnLabel: "Edit", action: showContainerAction },
+    ],
+  };
+
+  // useEffect(() => {
+  //   setDataValue(data);
+  //   setKeys(Object.keys(data));
+  //   setValues(Object.values(data));
+  // }, [data]);
+
+  useEffect(() => {
+    console.log("Data value ===== ", dataValue);
+    setKeys(Object.keys(dataValue));
+    setValues(Object.values(dataValue));
+  }, [dataValue]);
+
+  const rotate_and_process = async () => {
+    setIsLoading(true);
+    try {
+      const payload = {
+        data,
+      };
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partCRotateProcess`,
+        {
+          method: "POST",
+          header: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      const responseData = await response.json();
+      setIsLoading(false);
+      if (responseData.status === "success") {
+        console.log("Response successfull ...");
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
+  const updateRecordPartA = async () => {
+    console.log(registerNumber);
+    console.log(subjectCode);
+    console.log(barcode, qrcode);
+    console.log(!registerNumber && !subjectCode && (!barcode || !qrcode));
+    if (!registerNumber && !subjectCode && (!barcode || !qrcode)) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const payload = {
+        qrcode,
+        barcode,
+        table: tableName,
+        s3Path,
+        subjectCode,
+        registerNumber,
+        imageName,
+        rotateAngle,
+      };
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartAdata`,
+        {
+          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") {
+        //toast.success("Record Updated Successfully ...");
+        if (totalData) {
+          console.log("current total length ... ", totalData?.length);
+          console.log("current current index ...", currentCardIndex);
+          if (currentCardIndex < totalData?.length - 1) {
+            setCurrentCardIndex((prev) => prev + 1);
+          }
+        }
+        const newCurrentIndex = currentCardIndex + 1;
+      }
+    } catch (error) {
+      setIsLoading(false);
+      //toast.error("Something Went Wrong ...");
+      throw new Error(error);
+    }
+  };
+
+  const saveRotatedImage = async () => {
+    try {
+      if (rotateAngle === 0) {
+        return;
+      }
+      const payload = {
+        imageName,
+        tableNameData,
+        rotateAngle,
+        s3_path: data[s3_image_column],
+      };
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      if (responseData.status === "success") {
+        toast.success("Image Rotation Saved Successfully");
+      } else {
+        toast.error("Something Went Wrong !...");
+      }
+    } catch (error) {
+      setIsLoading(false);
+      toast.error("Something Went Wrong !...");
+      throw new Error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (oldData?.image_name && tableName) {
+      const fetchPrimaryKeyData = async () => {
+        setIsLoading(true)
+        try {
+          const payload = {
+            table: tableName,
+            image_name: oldData?.image_name,
+          };
+          const response = await fetch(
+            `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(payload),
+            }
+          );
+          const responseData = await response.json();
+          console.log("response json 11 === ", responseData);
+          setIsLoading(false)
+          if (responseData?.status === "success") {
+            const results = responseData?.data;
+            console.log("results ==== ", results);
+            if (results?.length > 0) {
+              console.log("results === ", results);
+              setData(results[0]);
+            }
+          }
+        } catch (error) {
+          setIsLoading(false)
+          throw new Error(error);
+        }
+      };
+      setTimeout(() => {
+        fetchPrimaryKeyData();
+      }, 200);
+    }
+  }, [oldData]);
+
+  return (
+    <Box className="w-100 rounded shadow mb-5 bg-white">
+      <ToastContainer />
+      <Box className="p-4 d-flex justify-content-between align-items-center">
+        <Box className="p-1">
+          <Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
+            {/* {query.includes("ocr_scanned_part_c_v1") &&
+              data[s3_image_column] && (
+                <>
+                  <Button
+                    className="w-50 m-0 bg-primary text-white p-1 rounded"
+                    onClick={() => navigate(`/sqlPlayground/edit?image_name=${data["image_name"]}&table=ocr_scanned_part_c_v1&error=${error}&error_reason=${error_reason}&sysNo=${reduxSystemNo}&degreeType=${degreeType}`)}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    className="w-50 m-0 bg-primary text-white p-1 rounded"
+                    onClick={() => {
+                      mark_as_backpage();
+                    }}
+                  >
+                    Mark As Back
+                  </Button>
+                  <Button
+                    className="w-50 m-0 bg-primary text-white p-1 rounded"
+                    onClick={() => {
+                      mark_as_ev();
+                    }}
+                  >
+                    Mark As EV
+                  </Button>
+                  <Button
+                    className="w-50 m-0 bg-primary text-white p-1 rounded"
+                    onClick={() => {
+                      mark_as_dummy();
+                    }}
+                  >
+                    Mark As Dummy
+                  </Button>
+                </>
+              )} */}
+
+            {/* <Button className="bg-primary">
+              <a
+                href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
+              >
+                <DownloadIcon className="text-light text-white" />
+              </a>
+            </Button> */}
+          </Box>
+          <Box className="border border-dark" id={imageName}>
+            <img
+              src={`https://docs.exampaper.vidh.ai/${oldData[s3_image_column]}`}
+              width="1200px"
+              height="auto"
+              alt="Image Alt"
+              ref={imageEleRef}
+            />
+          </Box>
+        </Box>
+        {/* <Box
+          className="d-flex flex-column gap-2 mx-2 py-3"
+          style={{ minWidth: "250px" }}
+        >
+          {type &&
+            buttonActions[type].map((action) => (
+              <Button
+                className="m-0 bg-primary text-white p-3 rounded"
+                onClick={action?.action}
+              >
+                {action?.btnLabel}
+              </Button>
+            ))}
+          <Box className="d-flex flex-column justify-content-between gap-2 my-2">
+            <Button
+              className="m-0 bg-primary text-white p-3 rounded"
+              onClick={rotateLeft}
+            >
+              Rotate left
+              <RotateLeftIcon />
+            </Button>
+
+            <Button
+              className="m-0 bg-primary text-white p-3 rounded"
+              onClick={rotateRight}
+            >
+              Rotate Right
+              <RotateRight />
+            </Button>
+            <Button
+              className="m-0 bg-primary text-white p-3 rounded"
+              onClick={() =>
+                saveRotatedImage(
+                  imageName,
+                  tableNameData,
+                  rotateAngle,
+                  data,
+                  setIsLoading
+                )
+              }
+            >
+              Save
+            </Button>
+          </Box>
+        </Box> */}
+        <Box className="py-3 d-flex flex-column justify-content-end w-100 gap-3 p-3">
+          {type !== "Attendence" ? (
+            <>
+              <TextInputField
+                value={qrcode}
+                setValue={setQrcode}
+                placeholder={"QR code"}
+              />
+              <TextInputField
+                value={barcode | null}
+                setValue={setBarcode}
+                placeholder={"BarCode"}
+              />
+              <TextInputField
+                value={subjectCode}
+                setValue={setSubjectCode}
+                placeholder={"Subject code"}
+              />
+            </>
+          ) : (
+            <>
+              <TextInputField
+                value={qrcode}
+                setValue={setQrcode}
+                placeholder={"QR code"}
+              />
+              <TextInputField
+                value={subjectCode}
+                setValue={setSubjectCode}
+                placeholder={"Subject Code"}
+              />
+              <TextInputField
+                value={totalStudents}
+                setValue={setTotalStudents}
+                placeholder={"Total Students"}
+              />
+              <TextInputField
+                value={totalPresent}
+                setValue={setTotalPresent}
+                placeholder={"Total Present"}
+              />
+              <TextInputField
+                value={totalAbsent}
+                setValue={setTotalAbsent}
+                placeholder={"Total Absent"}
+              />
+            </>
+          )}
+          {type == "PartC" ? (
+            <TextInputField
+              value={marks}
+              setValue={setMarks}
+              placeholder={"Marks"}
+            />
+          ) : type == "PartA" ? (
+            <TextInputField
+              value={registerNumber}
+              setValue={setRegisterNumber}
+              placeholder={"Register no"}
+            />
+          ) : null}
+          {type == "PartC" ? (
+            <Button
+              className="bg-primary text-white p-3"
+              onClick={() => updateRecordPartC()}
+            >
+              Update
+            </Button>
+          ) : type == "PartA" ? (
+            <Button
+              className="bg-primary text-white p-3"
+              onClick={() => updateRecordPartA()}
+            >
+              Update
+            </Button>
+          ) : type == "Attendence" ? (
+            <Button
+              className="bg-primary text-white p-3"
+              onClick={() =>
+                updatePlayGroundAttendence(
+                  setIsLoading,
+                  qrcode,
+                  subjectCode,
+                  totalStudents,
+                  totalPresent,
+                  totalAbsent,
+                  data,
+                  setShowEditContainer
+                )
+              }
+            >
+              Update
+            </Button>
+          ) : 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"
+              onClick={() => {
+                if (totalData) {
+                  if (currentCardIndex >= 1) {
+                    setCurrentCardIndex((prev) => prev - 1);
+                  }
+                }
+              }}
+            >
+              <ArrowBackIcon />
+            </Button>
+            <Button
+              className="bg-primary text-white p-3 w-50"
+              onClick={() => {
+                if (totalData) {
+                  console.log("current total length ... ", totalData?.length);
+                  console.log("current current index ...", currentCardIndex);
+                  if (currentCardIndex < totalData?.length - 1) {
+                    setCurrentCardIndex((prev) => prev + 1);
+                  }
+                }
+              }}
+            >
+              <ArrowForwardIcon />
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
+      {showEditContainer && (
+        <PlayGroundEditContainer
+          type={type}
+          rotateAngle={rotateAngle}
+          data={data}
+          s3Path={data[s3_image_column]}
+          tableName={tableName}
+          imageName={data["image_name"]}
+          setShowEditContainer={setShowEditContainer}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default UpdatedPlaygroundUpdater;