latest

src/Components/CustomQueryExecutorCard.jsx

@@ -3,9 +3,13 @@ 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 { 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"
 
 const CustomQueryExecutorCard = ({
   data,
@@ -16,7 +20,7 @@ const CustomQueryExecutorCard = ({
   reduxSystemNo,
   degreeType,
   type,
-  tableName
+  tableName,
 }) => {
   // console.log("ERROR ============= ",error)
   // console.log("ERROR REASON ============== ",error_reason)
@@ -28,10 +32,11 @@ const CustomQueryExecutorCard = ({
   const [keys, setKeys] = useState([]);
   const [values, setValues] = useState([]);
   const [rotateAngle, setRotateAngle] = useState(0);
-  const [imageName,setImageName] = useState(null)
+  const [imageName, setImageName] = useState(null);
-  const [tableNameData,setTableNameData] = useState(null)
+  const [tableNameData, setTableNameData] = useState(null);
-  const imageEleRef = useRef()
+  const imageEleRef = useRef();
-  console.log("data =================== ",data)
+  const [showEditContainer,setShowEditContainer] = useState(false)
+  console.log("data =================== ", data);
   // console.log("image column ====== ", s3_image_column);
   // console.log("s3 image ======= ", data[s3_image_column]);
   //   console.log("Keys ==== ",keys)
@@ -39,104 +44,23 @@ const CustomQueryExecutorCard = ({
 
   useEffect(() => {
     if (data) {
-      console.log("Image name ====== ",data?.image_name)
+      console.log("Image name ====== ", data?.image_name);
-      setImageName(data?.image_name)
+      setImageName(data?.image_name);
     }
     if (tableName) {
-      setTableNameData(tableName)
+      setTableNameData(tableName);
     }
-  },[data])
-
-
-  const updateFront = () => {
-    console.log("update front");
-  };
-
-  const updateBack = () => {
-    console.log("update back ..");
-  };
-
-  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 buttonActions = {
-    PartC: [
-      { btnLabel: "Mark As Front", action: updateFront },
-      { btnLabel: "Mark As Back", action: updateBack },
-      { btnLabel: "Initiate Process", action: initateProcess },
-    ],
-  };
-
-  useEffect(() => {
-    setDataValue(data);
-    setKeys(Object.keys(data));
-    setValues(Object.values(data));
   }, [data]);
 
-  useEffect(() => {
+  const updatePartAInstructions = async () => {
-    console.log("Data value ===== ", dataValue);
+    console.log("update instrunction");
-    setKeys(Object.keys(dataValue));
-    setValues(Object.values(dataValue));
-  }, [dataValue]);
-
-  const mark_as_ev = async () => {
     const payload = {
       data,
     };
     try {
       setIsLoading(true);
       const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
+        `${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") {
-        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 mark_as_dummy = async () => {
-    const payload = {
-      data,
-    };
-    try {
-      setIsLoading(true);
-      const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcDummyMarking`,
         {
           method: "POST",
           headers: {
@@ -149,10 +73,10 @@ const CustomQueryExecutorCard = ({
       const responseData = await response.json();
       if (responseData.status === "success") {
         console.log("Updation successfull ....");
-        const updatedData = { ...dataValue, type: 102 };
+        const updatedData = { ...dataValue, is_backpage: 1 };
         // console.log("Data ===== ", updatedData);
         setDataValue(updatedData);
-        toast.success("Record Marked as Dummy ! ....");
+        // toast.success("Record Marked as Backpage ! ....");
       } else {
         throw new Error(responseData?.message);
       }
@@ -161,21 +85,15 @@ const CustomQueryExecutorCard = ({
     }
   };
 
-
+  const updatePartAFront = async () => {
-  const saveRotatedImage = async () =>{
+    console.log("update front");
-    try{
-      if(rotateAngle === 0){
-        return
-      }
     const payload = {
-        imageName,
+      data,
-        tableNameData,
+    };
-        rotateAngle,
+    try {
-        s3_path : data[s3_image_column]
-      }
       setIsLoading(true);
       const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partAFrontSideMarking`,
         {
           method: "POST",
           headers: {
@@ -187,16 +105,55 @@ const CustomQueryExecutorCard = ({
       setIsLoading(false);
       const responseData = await response.json();
       if (responseData.status === "success") {
-        toast.success("Image Rotation Saved Successfully")
+        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) {
-      setIsLoading(false)
+      throw new Error(error);
-      throw new Error(error)
-    }
     }
+  };
 
-  const mark_as_backpage = async () => {
+  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 Backpage ! ....");
+      } else {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  
+
+  const updateBack = async () => {
     const payload = {
       data,
     };
@@ -219,7 +176,7 @@ const CustomQueryExecutorCard = ({
         const updatedData = { ...dataValue, is_backpage: 1 };
         // console.log("Data ===== ", updatedData);
         setDataValue(updatedData);
-        toast.success("Record Marked as Backpage ! ....");
+        // toast.success("Record Marked as Backpage ! ....");
       } else {
         throw new Error(responseData?.message);
       }
@@ -228,6 +185,158 @@ const CustomQueryExecutorCard = ({
     }
   };
 
+  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 {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      setIsLoading(false)
+      throw new Error(error);
+    }
+  }
+
+  const showContainerAction = () =>{
+    setShowEditContainer(true)
+  }
+
+  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 Instruction", action: updatePartAInstructions },
+      { btnLabel: "Initiate Process", action: initateProcess },
+      { btnLabel: "Mark As Dummy",action:markAsDummy },
+      { 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 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")
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
   const rotate_and_process = async () => {
     setIsLoading(true);
     try {
@@ -257,15 +366,7 @@ const CustomQueryExecutorCard = ({
 
   return (
     <Box className="w-100 rounded shadow mb-5 bg-white">
-      <ToastContainer />
       <Box className="p-4 d-flex justify-content-between align-items-start">
-        <Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
-          {keys.map((record, index) => (
-            <p>
-              <strong>{keys[index]}</strong> : {values[index]}
-            </p>
-          ))}
-        </Box>
         <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") &&
@@ -303,22 +404,14 @@ const CustomQueryExecutorCard = ({
                   </Button>
                 </>
               )} */}
-            {type &&
+
-              buttonActions[type].map((action) => (
+            {/* <Button className="bg-primary">
-                <Button
-                  className="w-50 m-0 bg-primary text-white p-1 rounded"
-                  onClick={action?.action}
-                >
-                  {action?.btnLabel}
-                </Button>
-              ))}
-            <Button className="bg-primary">
               <a
                 href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
               >
                 <DownloadIcon className="text-light text-white" />
               </a>
-            </Button>
+            </Button> */}
           </Box>
           <Box className="border border-dark" id={imageName}>
             <img
@@ -329,26 +422,49 @@ const CustomQueryExecutorCard = ({
               ref={imageEleRef}
             />
           </Box>
-          <Box className="d-flex justify-content-between gap-2 my-2">
+        </Box>
+        <Box className="d-flex flex-column gap-2 mx-2 py-3" style={{minWidth:"250px"}}>
+          {type &&
+            buttonActions[type].map((action) => (
               <Button
-              className="w-50 m-0 bg-primary text-white p-1 rounded"
+                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
+              Rotate left<RotateLeftIcon/>
-            </Button>
-            <Button className="w-50 m-0 bg-primary text-white p-1 rounded" onClick={saveRotatedImage}>
-              Save
             </Button>
+
             <Button
-              className="w-50 m-0 bg-primary text-white p-1 rounded"
+              className="m-0 bg-primary text-white p-3 rounded"
               onClick={rotateRight}
             >
-              Rotate Right
+              Rotate Right<RotateRight/>
+            </Button>
+            <Button
+              className="m-0 bg-primary text-white p-3 rounded"
+              onClick={saveRotatedImage}
+            >
+              Save
             </Button>
           </Box>
         </Box>
+        <Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
+          {keys.map((record, index) => (
+            <p>
+              <strong>{keys[index]}</strong> : {values[index]}
+            </p>
+          ))}
+        </Box>
       </Box>
       {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
+      {showEditContainer && <PlayGroundEditContainer rotateAngle={rotateAngle} data={data} s3Path={data[s3_image_column]} tableName={tableName} imageName={data["image_name"]} setShowEditContainer={setShowEditContainer}/>}
     </Box>
   );
 };

src/Components/CustomQueryExecutorCard_BK.jsx

@@ -0,0 +1,356 @@
+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";
+
+const CustomQueryExecutorCard = ({
+  data,
+  s3_image_column,
+  query,
+  error,
+  error_reason,
+  reduxSystemNo,
+  degreeType,
+  type,
+  tableName
+}) => {
+  // 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()
+  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)
+    }
+  },[data])
+
+
+  const updateFront = () => {
+    console.log("update front");
+  };
+
+  const updateBack = () => {
+    console.log("update back ..");
+  };
+
+  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 buttonActions = {
+    PartC: [
+      { btnLabel: "Mark As Front", action: updateFront },
+      { btnLabel: "Mark As Back", action: updateBack },
+      { btnLabel: "Initiate Process", action: initateProcess },
+    ],
+  };
+
+  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 mark_as_ev = 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 mark_as_dummy = async () => {
+    const payload = {
+      data,
+    };
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcDummyMarking`,
+        {
+          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, type: 102 };
+        // console.log("Data ===== ", updatedData);
+        setDataValue(updatedData);
+        toast.success("Record Marked as Dummy ! ....");
+      } else {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      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")
+      }
+
+    }catch(error){
+      setIsLoading(false)
+      throw new Error(error)
+    }
+  }
+
+  const mark_as_backpage = 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 {
+        throw new Error(responseData?.message);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  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);
+    }
+  };
+
+  return (
+    <Box className="w-100 rounded shadow mb-5 bg-white">
+      <ToastContainer />
+      <Box className="p-4 d-flex justify-content-between align-items-start">
+        <Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
+          {keys.map((record, index) => (
+            <p>
+              <strong>{keys[index]}</strong> : {values[index]}
+            </p>
+          ))}
+        </Box>
+        <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>
+                </>
+              )} */}
+            {type &&
+              buttonActions[type].map((action) => (
+                <Button
+                  className="w-50 m-0 bg-primary text-white p-1 rounded"
+                  onClick={action?.action}
+                >
+                  {action?.btnLabel}
+                </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/${data[s3_image_column]}`}
+              width="800px"
+              height="auto"
+              alt="Image Alt"
+              ref={imageEleRef}
+            />
+          </Box>
+          <Box className="d-flex justify-content-between gap-2 my-2">
+            <Button
+              className="w-50 m-0 bg-primary text-white p-1 rounded"
+              onClick={rotateLeft}
+            >
+              Rotate left
+            </Button>
+            <Button className="w-50 m-0 bg-primary text-white p-1 rounded" onClick={saveRotatedImage}>
+              Save
+            </Button>
+            <Button
+              className="w-50 m-0 bg-primary text-white p-1 rounded"
+              onClick={rotateRight}
+            >
+              Rotate Right
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
+    </Box>
+  );
+};
+
+export default CustomQueryExecutorCard;

src/Components/PlayGroundEditContainer.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { Button, Box } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import { NavLink, Link } from "react-router-dom";
+import TextInputField from "./TextInputField";
+import { Height } from "@mui/icons-material";
+import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+
+const PlayGroundEditContainer = ({
+  data,
+  s3Path,
+  imageName,
+  tableName,
+  setShowEditContainer,
+  rotateAngle,
+}) => {
+  const type = "PartC";
+  const dialogText = "This is dialog text";
+  const [marks, setMarks] = useState(null);
+  const [barcode, setBarcode] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [qrcode, setQrcode] = useState(null);
+  const [subjectCode, setSubjectCode] = useState(null);
+  const [open, setOpen] = useState(true); // Set open state to true by default
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (data) {
+      setQrcode(data?.qrcode);
+      setBarcode(data?.barcode);
+      setMarks(data?.marks);
+      setSubjectCode(data?.subject_code)
+    }
+  }, [data]);
+
+  const updateRecord = 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 ...");
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="lg" style={{zIndex:100}} fullWidth>
+      <DialogContent>
+        <Box className="d-flex justify-content-between align-items-start gap-4">
+          <Box className="d-flex flex-column">
+            <img
+              src={`https://docs.exampaper.vidh.ai/${s3Path}`}
+              height={"100%"}
+              width={"100%"}
+            />
+          </Box>
+          <Box className="py-3 d-flex flex-column justify-content-end w-100 gap-3">
+            <TextInputField
+              value={qrcode}
+              setValue={setQrcode}
+              placeholder={"QR code"}
+            />
+            <TextInputField
+              value={barcode}
+              setValue={setBarcode}
+              placeholder={"BarCode"}
+            />
+            <TextInputField
+              value={marks}
+              setValue={setMarks}
+              placeholder={"Marks"}
+            />
+            <Button
+              className="bg-primary text-white p-3"
+              onClick={() => updateRecord()}
+            >
+              Update
+            </Button>
+            <Button
+              className="bg-primary text-white p-3"
+              onClick={() => setShowEditContainer(false)}
+            >
+              Close
+            </Button>
+          </Box>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PlayGroundEditContainer;