latest

package.json

@@ -20,6 +20,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-medium-image-zoom": "^5.2.4",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",

src/App.jsx

@@ -17,6 +17,9 @@ import AttendenceAdditionalRecord from "./Components/AttendenceAdditionalRecord"
 import AttendenceAdditionalRecordCorrection from "./Components/AttendenceAdditionalRecordCorrection";
 import AttendanceAdditionalSheet from "./Components/AttendanceAdditionalSheet";
 import QueryExecutor from "./Components/QueryExecutor";
+import RecordEditor from "./Components/RecordEditor";
+import VerifyMarks from "./Components/VerifyMarks";
+import QueryCardEditor from "./Components/QueryCardEditor";
 
 function App() {
   return (
@@ -24,14 +27,19 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />}></Route>
-          <Route path="/sqlPlayground" element={<QueryExecutor/>}></Route>
+          <Route path="/sqlPlayground" element={<QueryExecutor />}></Route>
+          <Route path="/sqlPlayground/edit" element={<QueryCardEditor/>}></Route>
           <Route
             path="/anomoly/attendence/reassigned"
             element={<AnomolyReassigned />}
           ></Route>
           <Route
-            path='/anomoly/attendence/additionalSheet'
+            path="/sqlPlayground/Editor"
-            element={<AttendanceAdditionalSheet/>}
+            element={<RecordEditor />}
+          ></Route>
+          <Route
+            path="/anomoly/attendence/additionalSheet"
+            element={<AttendanceAdditionalSheet />}
           ></Route>
           <Route
             path="/anomoly/reassigned/booklet"

src/Components/AntdesignLayout.jsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } 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 { useSelector, useDispatch } from "react-redux";
+import {
+  updatePartAanomolyData,
+  updateSystemNo,
+} from "../redux/actions/actions";
+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";
+
+const { Header, Content, Footer, Sider } = Layout;
+
+const AntdesignLayout = ({ children }) => {
+  const navigate = useNavigate();
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+  return (
+    <Layout
+      style={{
+        minHeight: "100vh",
+      }}
+    >
+      <ToastContainer />
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+          }}
+        >
+          <Box className="d-flex justify-content-between h-100 py-1 px-2">
+            <Button
+              className="bg-primary p-1 text-light"
+              onClick={() => {
+                navigate(-1);
+              }}
+            >
+              <ArrowBackIcon />
+            </Button>
+            <Box className="d-flex justify-content-between gap-2">
+              {/* <Button
+            className="bg-primary p-1 text-light"
+            onClick={() => {
+              navigate("/anomoly/reassigned/stats");
+            }}
+          >
+            <QueryStatsIcon />
+          </Button> */}
+              <Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
+                <Button
+                  className="bg-primary p-1 text-light rounded h-100"
+                  onClick={() => {
+                    navigate("/");
+                  }}
+                >
+                  <HomeIcon />
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </Header>
+        <Content
+          style={{
+            margin: "16px 16px",
+          }}
+        >
+          {children}
+        </Content>
+        <Box style={{ position: "fixed", bottom: "15px", left: "30px" }}>
+          <Button
+            className="bg-primary rounded-circle p-3"
+            onClick={() => {
+              window.scrollTo(0, 0);
+            }}
+          >
+            <ArrowUpwardIcon className="text-white" />
+          </Button>
+        </Box>
+        <Footer
+          style={{
+            textAlign: "center",
+          }}
+        >
+          exampaper.vidh.ai ©{new Date().getFullYear()}
+        </Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AntdesignLayout;

src/Components/Home.jsx

@@ -27,7 +27,11 @@ const Home = () => {
     {
       title:"SQL Playground",
       url:"/sqlPlayground"
-    }
+    },
+    // {
+    //   title:"Marks Verfication",
+    //   url:"/part-c/marks/verify"
+    // }
   ];
   
   // const cards = [

src/Components/QueryCardEditor.jsx

@@ -0,0 +1,217 @@
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Box, Button } from "@mui/material";
+
+import AntdesignLayout from "./AntdesignLayout";
+import TextInputField from "./TextInputField";
+import { toast } from "react-toastify";
+import LoadingContainer from "./LoadingContainer";
+import SimpleDialog from "./SimpleDialog";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+
+const QueryCardEditor = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [barcode, setBarcode] = useState();
+  const [qrcode, setQrcode] = useState();
+  const [marks, setMarks] = useState(null);
+  const [subjectCode, setSubjectCode] = useState(null);
+  const [imageName, setImageName] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [recordData, setRecordData] = useState([]);
+  const [s3Path, setS3Path] = useState(null);
+  const [showDialog, setShowDialog] = useState(false);
+  const [rotationResults, setRotationResults] = useState([]);
+
+  const table = searchParams.get("table");
+  const image_name = searchParams.get("image_name");
+
+  console.log("table is : ", table);
+
+  const fetchPrimaryKeyData = async () => {
+    try {
+      const payload = {
+        image_name,
+        table,
+      };
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      return await response.json();
+    } catch (error) {
+      throw new Error(error);
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (table && image_name) {
+        setIsLoading(true);
+        const response = await fetchPrimaryKeyData();
+        setIsLoading(false);
+        console.log("Response is : ", response);
+        if (response?.status === "success") {
+          console.log("=========== Success ============");
+          const data = response?.data;
+          if (data.length > 0) {
+            setRecordData(data[0]);
+          }
+        }
+      }
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    console.log("=========== Use effect triggered ===========");
+    setBarcode(recordData?.barcode);
+    setMarks(recordData?.marks);
+    setQrcode(recordData?.qrcode);
+    setImageName(recordData?.image_name);
+    setSubjectCode(recordData?.subject_code);
+    setS3Path(recordData?.s3_path);
+  }, [recordData]);
+
+  const updateRecord = async () => {
+    setIsLoading(true);
+    try {
+      const payload = {
+        qrcode,
+        barcode,
+        table,
+        s3Path,
+        subjectCode,
+        marks,
+        imageName,
+      };
+      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);
+    }
+  };
+
+  const initateRotation = async () => {
+    console.log("Rotating initiated ...");
+    setIsLoading(true);
+    const payload = {
+      imageName,
+    };
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/initateRotation`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      setIsLoading(false);
+      const responseData = await response.json();
+      console.log("Response data ======= ", responseData);
+      if (responseData?.status === "success") {
+        setShowDialog(true);
+        setRotationResults(responseData?.result);
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
+  return (
+    <AntdesignLayout>
+      <Box className="d-flex justify-content-between align-items-center">
+        <Box className="d-flex flex-column gap-3 w-25">
+          {imageName && <h5 className="text-left">ID : {imageName}</h5>}
+          <TextInputField
+            placeholder={"Barcode"}
+            value={barcode}
+            setValue={setBarcode}
+          />
+          <TextInputField
+            placeholder={"QR Code"}
+            value={qrcode}
+            setValue={setQrcode}
+          />
+          <TextInputField
+            placeholder={"Marks"}
+            value={marks}
+            setValue={setMarks}
+          />
+          <TextInputField
+            placeholder={"Subject Code"}
+            value={subjectCode}
+            setValue={setSubjectCode}
+          />
+          <Button
+            className="bg-primary text-white rounded p-3"
+            onClick={() => {
+              updateRecord();
+            }}
+          >
+            Update
+          </Button>
+          <Box className="d-flex justify-content-between">
+            <Button
+              className="bg-primary text-white rounded p-3"
+              onClick={() => initateRotation()}
+            >
+              Rotate <RotateLeftIcon />
+            </Button>
+            <Button
+              className="bg-primary text-white rounded p-3"
+              onClick={() => initateRotation()}
+            >
+              Rotate <RotateRightIcon />
+            </Button>
+          </Box>
+        </Box>
+        <Box className="w-75">
+          <Box className="px-5">
+            <img
+              src={`https://docs.exampaper.vidh.ai/${recordData?.s3_path}`}
+              width="100%"
+              height="auto"
+            />
+          </Box>
+        </Box>
+      </Box>
+      {isLoading && <LoadingContainer />}
+      {showDialog && (
+        <SimpleDialog
+          type="rotation_results"
+          rotationResults={rotationResults}
+          setShowDialog={setShowDialog}
+        />
+      )}
+    </AntdesignLayout>
+  );
+};
+
+export default QueryCardEditor;

src/Components/QueryExecutor.jsx

@@ -21,14 +21,25 @@ 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 { useSelector, useDispatch } from "react-redux";
 import {
   updatePartAanomolyData,
+  updatePlaygroundCurrentPage,
+  updatePlaygroundResults,
+  updatePlaygroundTotalPages,
   updateSystemNo,
 } from "../redux/actions/actions";
+
 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";
 
 const { Header, Content, Footer, Sider } = Layout;
 const QueryExecutor = () => {
@@ -39,13 +50,55 @@ const QueryExecutor = () => {
   const [imageColumn, setImageColumn] = useState(null);
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationPages,setPaginationPages] = useState(null)
   const [limit, setLimit] = useState("");
-  const recordsPerPage = 5;
+  const recordsPerPage = 50;
-
+  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(() => {
+    if (totalData.length == 0 && reduxPlaygroundResults.length > 0) {
+      setTotalData(reduxPlaygroundResults);
+      setImageColumn("s3_path")
+    }
+  }, [reduxPlaygroundResults]);
+
+  useEffect(() => {
+    if (currentPage == 0 && reduxPlaygroundPageNo !== 0) {
+      console.log("Updating in use effect ============================= >")
+      setCurrentPage(reduxPlaygroundPageNo);
+    }
+  }, [reduxPlaygroundPageNo]);
+
   const fetchQueryValue = async () => {
     if (query.includes("limit")) {
       alert("Please specify the limit in the input field.");
@@ -59,6 +112,13 @@ const QueryExecutor = () => {
       alert("Limit cannot be empty !!");
       return;
     }
+    if (
+      !query.includes("image_name") &&
+      query.includes("ocr_scanned_part_c_v1")
+    ) {
+      alert("Selecting primary Key (image_name) is mandatory");
+      return;
+    }
     setIsLoading(true);
     const payload = {
       query: query,
@@ -80,8 +140,10 @@ const QueryExecutor = () => {
       setIsLoading(false);
       if (data.status === "success") {
         setTotalData(data.results);
-        const totalPageCount = Math.ceil(data.results.length / recordsPerPage);
+        dispatch(updatePlaygroundResults(data?.results));
+        const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
         setTotalPages(totalPageCount);
+        dispatch(updatePlaygroundTotalPages(totalPages))
         setCurrentPage(1);
         setResponseData(data.results.slice(0, recordsPerPage));
       } else {
@@ -92,14 +154,51 @@ const QueryExecutor = () => {
     }
   };
 
+  useEffect(() => {
+    dispatch(updatePlaygroundQuery(query));
+  }, [query]);
+
+
   useEffect(() => {
     if (totalData.length > 0) {
-      const startIndex = (currentPage - 1) * recordsPerPage;
+      setResponseData([])
-      const endIndex = startIndex + recordsPerPage;
+      console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ")
-      setResponseData(totalData.slice(startIndex, endIndex));
+      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]);
+
   const getTableData = () => {
     if (responseData.length === 0) return null;
     const keys = Object.keys(totalData[0]);
@@ -117,10 +216,16 @@ const QueryExecutor = () => {
                 className="d-flex justify-content-center p-3 align-items-center"
               >
                 <div className="d-flex justify-content-center align-items-center p-1">
-                  <strong>{currentPage}</strong>/<strong>{totalPages}</strong>
+                  <Box className="d-flex flex-column align-items-end">
+                    <Box>{paginationPages}</Box>
+                    <Box>
+                      <strong>{currentPage}</strong>/
+                      <strong>{totalPages}</strong>
+                    </Box>
+                  </Box>
                 </div>
                 <div className="d-flex gap-3">
-                  <button
+                  {/* <button
                     className="btn text-light bg-primary rounded p-2 mx-3"
                     onClick={() =>
                       setCurrentPage((prev) => Math.max(prev - 1, 1))
@@ -136,203 +241,93 @@ const QueryExecutor = () => {
                   >
                     Next
                   </button>
+                  {} */}
                 </div>
               </div>
             </div>
           )}
         </div>
         <div className="my-2 overflow-auto">
-          <table>
+          {responseData.map((data) => (
-            <thead>
+            <QueryExecutorCard
-              <tr>
+              data={data}
-                <th>sno</th>
+              s3_image_column={imageColumn}
-                <th>Record Info</th>
+              query={query}
-                <th>Image</th>
+            />
-              </tr>
+          ))}
-            </thead>
-            <tbody>
-              {responseData.map((value, index) => {
-                const sno = totalData.indexOf(value) + 1;
-                let recordInfo = "";
-                let imageInfo = "";
-
-                keys.forEach((header) => {
-                  if (header !== imageColumn) {
-                    recordInfo += `<p><strong>${header}</strong>: ${value[header]}</p>`;
-                  } else {
-                    imageInfo = (
-                      <td key={header}>
-                        <img
-                          src={`https://docs.exampaper.vidh.ai/${value[header]}`}
-                          width="900px"
-                          height="auto"
-                          alt={header}
-                        />
-                      </td>
-                    );
-                  }
-                });
-
-                return (
-                  <tr key={index}>
-                    <td>{sno}</td>
-                    <td>
-                      <div
-                        className="d-flex flex-column p-2"
-                        dangerouslySetInnerHTML={{ __html: recordInfo }}
-                      ></div>
-                    </td>
-                    {imageInfo}
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
         </div>
       </div>
     );
   };
 
   return (
-    <Layout
+    <AntdesignLayout>
-      style={{
+      <div className="mx-3">
-        minHeight: "100vh",
+        <div className="my-3 d-flex flex-md-row flex-column">
-      }}
+          <div className="w-100 w-md-75">
-    >
+            <QueryExecutortextArea query={query} setQuery={setQuery} />
-      <ToastContainer />
+          </div>
-      <Layout>
+          <div className="d-none d-md-block w-25">
-        <Header
+            <div className="w-100 d-flex flex-column gap-2 mx-2">
-          style={{
+              <TextInputField
-            padding: 0,
+                placeholder={"limit"}
-            background: colorBgContainer,
+                value={limit}
-          }}
+                setValue={setLimit}
-        >
+              />
-          <Box className="d-flex justify-content-between h-100 py-1 px-2">
+              <TextInputField
-            <Button
+                placeholder={"imageColumn"}
-              className="bg-primary p-1 text-light"
+                value={imageColumn}
-              onClick={() => {
+                setValue={setImageColumn}
-                navigate(-1);
+              />
-              }}
+              <button
-            >
+                className="btn bg-primary text-light"
-              <ArrowBackIcon />
+                id="submit-btn"
-            </Button>
+                onClick={fetchQueryValue}
-            <Box className="d-flex justify-content-between gap-2">
+              >
-              {/* <Button
+                Submit
-              className="bg-primary p-1 text-light"
+              </button>
-              onClick={() => {
-                navigate("/anomoly/reassigned/stats");
-              }}
-            >
-              <QueryStatsIcon />
-            </Button> */}
-              <Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
-                <Button
-                  className="bg-primary p-1 text-light rounded h-100"
-                  onClick={() => {
-                    navigate("/");
-                  }}
-                >
-                  <HomeIcon />
-                </Button>
-              </Box>
-            </Box>
-          </Box>
-        </Header>
-        <Content
-          style={{
-            margin: "16px 16px",
-          }}
-        >
-          <div className="mx-3">
-            <div className="my-3 d-flex flex-md-row flex-column">
-              <div className="w-100 w-md-75">
-                <textarea
-                  className="w-100 p-3 h5"
-                  id="text-area-input"
-                  placeholder="Enter your query ...."
-                  rows="7"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                ></textarea>
-              </div>
-              <div  className="d-none d-md-block w-25">
-                <div className="w-100 d-flex flex-column gap-2 mx-2">
-                  <TextField
-                    className="rounded p-2 h6"
-                    type="text"
-                    placeholder="Limit"
-                    id="limit-input"
-                    autoComplete="off"
-                    value={limit}
-                    onChange={(e) => setLimit(e.target.value)}
-                  />
-                  <TextField
-                    className="input rounded p-2 h6"
-                    type="text"
-                    placeholder="Image column name"
-                    id="image-column-input"
-                    autoComplete="off"
-                    value={imageColumn}
-                    onChange={(e) => setImageColumn(e.target.value)}
-                  />
-                  <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 p-2 h6"
-                    type="text"
-                    placeholder="Limit"
-                    id="limit-input"
-                    autoComplete="off"
-                    value={limit}
-                    onChange={(e) => setLimit(e.target.value)}
-                  />
-                  <TextField
-                    className="input rounded p-2 h6"
-                    type="text"
-                    placeholder="Image column name"
-                    id="image-column-input"
-                    autoComplete="off"
-                    value={imageColumn}
-                    onChange={(e) => setImageColumn(e.target.value)}
-                  />
-                  <button
-                    className="btn bg-primary text-light"
-                    id="submit-btn"
-                    onClick={fetchQueryValue}
-                  >
-                    Submit
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              id="results-container"
-              className="d-flex w-100 justify-content-center"
-            >
-              {getTableData()}
             </div>
           </div>
-        </Content>
+
-        <Footer
+          <div className="d-block d-md-none w-100">
-          style={{
+            <div className="w-100 d-flex flex-column gap-2">
-            textAlign: "center",
+              <TextField
-          }}
+                className="rounded h6 bg-white"
+                type="text"
+                placeholder="Limit"
+                id="limit-input"
+                autoComplete="off"
+                value={limit}
+                onChange={(e) => setLimit(e.target.value)}
+              />
+              <TextField
+                className="input rounded h6 bg-white"
+                type="text"
+                placeholder="Image column name"
+                id="image-column-input"
+                autoComplete="off"
+                value={imageColumn}
+                onChange={(e) => setImageColumn(e.target.value)}
+              />
+              <button
+                className="btn bg-primary text-light"
+                id="submit-btn"
+                onClick={fetchQueryValue}
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          id="results-container"
+          className="d-flex w-100 justify-content-center"
         >
-          exampaper.vidh.ai ©{new Date().getFullYear()}
+          {getTableData()}
-        </Footer>
+        </div>
-      </Layout>
+      </div>
-      {isLoading && <LoadingContainer loadingText={"Loading"} />}
+      {isLoading && <LoadingContainer />}
-    </Layout>
+    </AntdesignLayout>
   );
 };
 

src/Components/QueryExecutorCard.jsx

@@ -0,0 +1,188 @@
+import { Box, Button } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { MoreHorizTwoTone } from "@mui/icons-material";
+import { useState, useEffect } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import LoadingContainer from "./LoadingContainer";
+import { useNavigate } from "react-router-dom";
+
+const QueryExecutorCard = ({ data, s3_image_column, query }) => {
+  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([]);
+  // console.log("image column ====== ", s3_image_column);
+  // console.log("s3 image ======= ", data[s3_image_column]);
+  //   console.log("Keys ==== ",keys)
+  //   console.log("Values ===== ",values)
+
+  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_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`)}
+                  >
+                    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="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">
+            <img
+              src={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
+              width="800px"
+              height="auto"
+              alt="Image Alt"
+            />
+          </Box>
+        </Box>
+      </Box>
+      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
+    </Box>
+  );
+};
+
+export default QueryExecutorCard;

src/Components/QueryExecutortextArea.jsx

@@ -0,0 +1,17 @@
+
+const QueryExecutortextArea = ({query,setQuery}) => {
+  return (
+    <>
+      <textarea
+        className="w-100 p-3 h5 bg-white"
+        id="text-area-input"
+        placeholder="Enter your query ...."
+        rows="7"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      ></textarea>
+    </>
+  );
+};
+
+export default QueryExecutortextArea;

src/Components/RecordEditor.jsx

@@ -0,0 +1,11 @@
+import {Box,Button} from '@mui/material'
+
+const RecordEditor = () =>{
+    return(
+     <Box>
+        hello
+     </Box>
+    )
+}
+
+export default RecordEditor

src/Components/SimpleDialog.jsx

@@ -1,109 +1,143 @@
-import React, { useState,useEffect } from "react";
+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 { Button, Box } from "@mui/material";
 import TextField from "@mui/material/TextField";
-import { NavLink,Link } from "react-router-dom";
+import { NavLink, Link } from "react-router-dom";
 
-
+const SimpleDialog = ({
-const  SimpleDialog = ({dialogBoxConsent,setDialogBoxConsent,showDialogBox,setShowDialogBox,dialogText,batchType}) => {
+  dialogBoxConsent,
+  setDialogBoxConsent,
+  showDialogBox,
+  setShowDialogBox,
+  dialogText,
+  batchType,
+  type,
+  rotationResults,
+  setShowDialog,
+}) => {
   const [open, setOpen] = useState(true); // Set open state to true by default
-  const [examCentreCode,setExamCentreCode] = useState(null)
+  const [examCentreCode, setExamCentreCode] = useState(null);
-  const [examDate,setExamDate] = useState(null)
+  const [examDate, setExamDate] = useState(null);
-  const [metaDataLink,setMetaDataLink] = useState(null)
+  const [metaDataLink, setMetaDataLink] = useState(null);
-  const MetabaseLink = "http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf"
+  const MetabaseLink =
-  console.log("MetabaseLink : ",MetabaseLink)
+    "http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf";
-  console.log(import.meta.env)
+  console.log("MetabaseLink : ", MetabaseLink);
+  console.log(import.meta.env);
   const handleClose = () => {
     setOpen(false);
   };
+  console.log("Rotation Results : ", rotationResults);
 
-  const handleYes = () =>{
+  const handleYes = () => {
     console.log("Consent is : ", dialogBoxConsent);
-    console.log("Dialog text before if condition :: ",dialogText)
+    console.log("Dialog text before if condition :: ", dialogText);
-    console.log("showDialog Box : ",showDialogBox)
+    console.log("showDialog Box : ", showDialogBox);
-    console.log("Setting Conset Yes")
+    console.log("Setting Conset Yes");
-    setDialogBoxConsent("Yes")
+    setDialogBoxConsent("Yes");
-    setShowDialogBox(false)
+    setShowDialogBox(false);
-  }
+  };
-  const handleNo = () =>{
+  const handleNo = () => {
     console.log("Consent is : ", dialogBoxConsent);
-    console.log("Dialog text before if condition :: ",dialogText)
+    console.log("Dialog text before if condition :: ", dialogText);
-    console.log("showDialog Box : ",showDialogBox)
+    console.log("showDialog Box : ", showDialogBox);
-    console.log("Setting consent NO")
+    console.log("Setting consent NO");
-    setDialogBoxConsent("No")
+    setDialogBoxConsent("No");
-    setShowDialogBox(false)
+    setShowDialogBox(false);
-  }
+  };
-
 
   const handleKeyPress = (event) => {
-    if (event.key === 'n' || event.key === 'N') {
+    if (event.key === "n" || event.key === "N") {
       console.log('The "N" key was pressed!');
-      handleNo()
+      handleNo();
-    }else if(event.key === "Y" || event.key === "y"){
+    } else if (event.key === "Y" || event.key === "y") {
-      console.log("Y is pressed")
+      console.log("Y is pressed");
-      handleYes()
+      handleYes();
     }
   };
 
-
-
   // Use useEffect to add the event listener
   useEffect(() => {
-    window.addEventListener('keydown', handleKeyPress);
+    window.addEventListener("keydown", handleKeyPress);
     return () => {
-      window.removeEventListener('keydown', handleKeyPress);
+      window.removeEventListener("keydown", handleKeyPress);
     };
   }, []);
 
-
+  useEffect(() => {
-
+    if (examCentreCode && examDate) {
-  useEffect(()=>{
+      setMetaDataLink(
-     if(examCentreCode && examDate){
+        `http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf?internal_exam_centre_code=${examCentreCode}&ref_exam_date=${examDate}`
-      setMetaDataLink(`http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf?internal_exam_centre_code=${examCentreCode}&ref_exam_date=${examDate}`)
+      );
-     }
+    }
-  },[examDate,examCentreCode])
+  }, [examDate, examCentreCode]);
 
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>Error :</DialogTitle>
       <DialogContent>
-        <DialogContentText>
+        {type !== "rotation_results" ? (
-          <h6>Missing Data - {dialogText}</h6>
+          <DialogContentText>
-          Data Entered Is Not found in the DB.Do you want to Continue editing ??
+            <h6>Missing Data - {dialogText}</h6>
-          {batchType == "new" && <Box className="d-flex gap-4 my-4">
+            Data Entered Is Not found in the DB.Do you want to Continue editing
-          
+            ??
-            {/* <Link to={MetabaseLink} target="_blank">{MetabaseLink}</Link> */}
+            {batchType == "new" && (
-              {/* <TextField
+              <Box className="d-flex gap-4 my-4">
-              value={examCentreCode}
+                {/* <Link to={MetabaseLink} target="_blank">{MetabaseLink}</Link> */}
-              onChange={(e)=>{
+                {/* <TextField
-                setExamCentreCode(e.target.value)
+            value={examCentreCode}
-              }}
+            onChange={(e)=>{
-              label={"Exam Centre Code"}
+              setExamCentreCode(e.target.value)
-              autoComplete="off"
+            }}
-              />
+            label={"Exam Centre Code"}
-                     <TextField
+            autoComplete="off"
-              value={examDate}
+            />
-              onChange={(e)=>{
+                   <TextField
-                setExamDate(e.target.value)
+            value={examDate}
-              }}
+            onChange={(e)=>{
-              label={"Exam Date"}
+              setExamDate(e.target.value)
-              autoComplete="off"
+            }}
-              /> */}
+            label={"Exam Date"}
-          </Box>}
+            autoComplete="off"
-          {/* {
+            /> */}
-            metaDataLink && <iframe width="1000px" height="800px" src={metaDataLink}/>
+              </Box>
-          } */}
+            )}
-          <Box className="d-flex justify-content-end gap-2 my-3">
+            {/* {
-            <Button className="bg-primary p-2 text-light" onClick={handleYes}>YES</Button>
+          metaDataLink && <iframe width="1000px" height="800px" src={metaDataLink}/>
-            <Button className="bg-primary p-2 text-light" onClick={handleNo}>NO</Button>
+        } */}
+            <Box className="d-flex justify-content-end gap-2 my-3">
+              <Button className="bg-primary p-2 text-light" onClick={handleYes}>
+                YES
+              </Button>
+              <Button className="bg-primary p-2 text-light" onClick={handleNo}>
+                NO
+              </Button>
+            </Box>
+          </DialogContentText>
+        ) : (
+          <Box>
+            <DialogContentText>
+              <Box className="d-flex flex-column">
+                Backage : {rotationResults?.is_backpage}
+                Is EV cover : {rotationResults?.is_cover}
+                Category Found : {rotationResults?.categoryFound}
+              </Box>
+            </DialogContentText>
+            <Box className="py-3 d-flex justify-content-end">
+              <Button
+                className="bg-primary text-white p-2"
+                onClick={() => setShowDialog(false)}
+              >
+                Close
+              </Button>
+            </Box>
           </Box>
-        </DialogContentText>
+        )}
       </DialogContent>
     </Dialog>
   );
-}
+};
 
 export default SimpleDialog;

src/Components/TextInputField.jsx

@@ -0,0 +1,23 @@
+import { Label } from "@mui/icons-material";
+import { TextField, Box } from "@mui/material";
+
+const TextInputField = ({ placeholder, value, setValue }) => {
+  return (
+    <Box className="d-flex flex-column">
+      <label for="limit-input" className="text-left">
+        {placeholder} :-
+      </label>
+      <TextField
+        className="rounded h6 bg-white"
+        type="text"
+        placeholder={placeholder}
+        id="limit-input"
+        autoComplete="off"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </Box>
+  );
+};
+
+export default TextInputField;

src/Components/VerifyMarks.jsx

@@ -0,0 +1,20 @@
+import { Box } from "@mui/material";
+import { useState, useEffect } from "react";
+
+
+import AntdesignLayout from "./AntdesignLayout";
+import QueryExecutortextArea from "./QueryExecutortextArea";
+
+
+const VerifyMarks = () => {
+  const [query, setQuery] = useState(null);
+  return (
+    <AntdesignLayout>
+      <Box>
+        <QueryExecutortextArea query={query} setQuery={setQuery}/>
+      </Box>
+    </AntdesignLayout>
+  );
+};
+
+export default VerifyMarks;

src/redux/actions/actions.jsx

@@ -1,14 +1,34 @@
-export const updateAttendenceAnomolyData = (data) =>({
+export const updateAttendenceAnomolyData = (data) => ({
-    type:"UPDATE_ATTENDENCE_ANOMOLY_DATA",
+  type: "UPDATE_ATTENDENCE_ANOMOLY_DATA",
-    payload:data,
+  payload: data,
-  })
+});
 
-export const updatePartAanomolyData = (data) =>({
+export const updatePartAanomolyData = (data) => ({
-  type:"UPDATE_PART-A_ANOMOLY_DATA",
+  type: "UPDATE_PART-A_ANOMOLY_DATA",
-  payload:data
+  payload: data,
-})
+});
 
 export const updateSystemNo = (data) => ({
-  type:"UPDATE_SYSTEM_NO",
+  type: "UPDATE_SYSTEM_NO",
-  payload:data
+  payload: data,
-})
+});
+
+export const updatePlaygroundQuery = (data) => ({
+  type: "UPDATE_PLAYGROUND_QUERY",
+  payload: data,
+});
+
+export const updatePlaygroundCurrentPage = (data) => ({
+  type: "UPDATE_PLAYGROUND_PAGENO",
+  payload: data,
+});
+
+export const updatePlaygroundTotalPages = (data) => ({
+  type: "UPDATE_PLAYGROUND_TOTAL_PAGES",
+  payload: data,
+});
+
+export const updatePlaygroundResults = (data) => ({
+  type: "UPDATE_PLAYGROUND_RESULTS",
+  payload: data,
+});

src/redux/reducers/Reducer.jsx

@@ -2,7 +2,11 @@
 const initialState = {
     attendenceAnomolyData : [],
     partABatchAnomolyData : [],
-    systemNumber : null
+    systemNumber : null,
+    playGroundQuery : null,
+    playGroundResults : [],
+    playGroundtotalPages : 0,
+    playGroundCurrentPage : 0
   };
   
   const reducer = (state = initialState, action) => {
@@ -13,6 +17,14 @@ const initialState = {
         return { ...state, partABatchAnomolyData:action?.payload};
       case 'UPDATE_SYSTEM_NO':
         return { ...state,systemNumber:action?.payload}
+      case 'UPDATE_PLAYGROUND_QUERY':
+        return { ...state,playGroundQuery:action?.payload}
+      case 'UPDATE_PLAYGROUND_RESULTS':
+        return { ...state,playGroundResults:action?.payload}
+      case 'UPDATE_PLAYGROUND_PAGENO':
+        return { ...state,playGroundtotalPages:action?.payload}
+      case 'UPDATE_PLAYGROUND_TOTAL_PAGES':
+        return { ...state,playGroundCurrentPage:action?.payload}
       default:
         return state;
     }