From e12f9af402b3e890184241cae25f80bedde5d781 Mon Sep 17 00:00:00 2001
From: Pradeeppon01 <ponpradeeep@gmail.com>
Date: Thu, 1 Aug 2024 16:02:22 +0530
Subject: [PATCH] latest

---
 .env                                      |   4 +-
 src/App.jsx                               |   5 +
 src/Components/DummyDuplicates.jsx        | 124 +++++++++
 src/Components/DummyDuplicatesPreview.jsx | 304 ++++++++++++++++++++++
 src/Components/Home.jsx                   |   4 +
 5 files changed, 439 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/DummyDuplicates.jsx
 create mode 100644 src/Components/DummyDuplicatesPreview.jsx

diff --git a/.env b/.env
index a596950..6bb0697 100644
--- a/.env
+++ b/.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="https://api.exampaper.vidh.ai"
\ No newline at end of file
+VITE_REACT_APP_BACKEND_URL="http://localhost:9999"
+#VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index ab23e8f..f556d45 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -29,6 +29,7 @@ import PlayGrounds from "./Components/PlayGrounds";
 import PlayGround from "./Components/PlayGround";
 import Revaluation from "./Components/Revaluation";
 import PlayGroundUpdated from "./Components/PlaygroundUpdated"
+import DummyDuplicates from "./Components/DummyDuplicates";
 
 
 function App() {
@@ -49,6 +50,10 @@ function App() {
             path="/anomoly/attendence/reassigned"
             element={<AnomolyReassigned />}
           ></Route>
+          <Route 
+          path="/DummyDuplicates/:type"
+          element={<DummyDuplicates/>}
+          ></Route>
           <Route
             path="/sqlPlayground/Editor"
             element={<RecordEditor />}
diff --git a/src/Components/DummyDuplicates.jsx b/src/Components/DummyDuplicates.jsx
new file mode 100644
index 0000000..b4118b2
--- /dev/null
+++ b/src/Components/DummyDuplicates.jsx
@@ -0,0 +1,124 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { styled } from "@mui/system";
+import {
+  TablePagination,
+  tablePaginationClasses as classes,
+} from "@mui/base/TablePagination";
+import { Link } from "react-router-dom";
+import TextField from "@mui/material/TextField";
+import { Box } from "@mui/material";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import Snackbar from "@mui/material/Snackbar";
+import ImageDialog from "./ImageDialog";
+import { ToastContainer, toast } from "react-toastify";
+import DummyDuplicatesPreview from "./DummyDuplicatesPreview";
+
+import AntdesignLayout from "./AntdesignLayout";
+
+const DummyDuplicates = () => {
+  const [dummyDuplicatesData, setDummyDuplicatesData] = useState([]);
+  const [duplicateBarcodes, setDuplicateBarcodes] = useState([]);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [currentImagePath, setCurrentImagePath] = useState("");
+  const [barcode, SetBarcode] = useState(null);
+
+  const { type } = useParams();
+  console.log("Type ======= ", type);
+
+  useEffect(() => {
+    console.log("Dummy Duplicates data ======= ", dummyDuplicatesData);
+  }, [dummyDuplicatesData]);
+
+  useEffect(() => {
+    const fetchDuplicateBarcodes = async () => {
+      try {
+        const response = await fetch(
+          `${
+            import.meta.env.VITE_REACT_APP_BACKEND_URL
+          }/fetchDummyDuplicatesData`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              type,
+            }),
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const responseData = await response.json();
+        console.log("Response Data ==== ", responseData);
+        if (responseData?.status == "success") {
+          console.log("The fetch Dumplicate records is success ....");
+          setDummyDuplicatesData(responseData?.data);
+          setDuplicateBarcodes(responseData?.duplicate_barcodes);
+        }
+      } catch (error) {
+        throw new Error(error);
+      }
+    };
+    fetchDuplicateBarcodes();
+  }, []);
+
+  const handleImagePreview = (e) => {
+    console.log("clicking barcode ...");
+    setIsDialogOpen(true);
+    console.log("e ========== ", e.target);
+    const ele = e.target;
+    console.log("ele ==== ", ele);
+    console.log("e.dataset ==== ", e.dataset);
+    console.log("barcode ==== ", ele.dataset.barcode);
+    const barcodeFromEle = ele.dataset.barcode;
+    if (barcodeFromEle) {
+      SetBarcode(barcodeFromEle);
+    }
+  };
+
+  const [openLoader, setOpenLoader] = useState(false);
+  const handleCloseLoader = () => {
+    setOpenLoader(false);
+  };
+  const handleOpenLoader = () => {
+    setOpenLoader(true);
+  };
+
+  return (
+    <AntdesignLayout>
+      {dummyDuplicatesData?.length > 0 &&
+        duplicateBarcodes.map((barcode) => (
+          <Box
+            className="p-3 rounded bg-white my-2 w-100 m-3 cursor-pointer overflow-auto"
+            stype={{ cursor: "pointer" }}
+            onClick={handleImagePreview}
+            data-barcode={barcode}
+          >
+            <h5 data-barcode={barcode}>{barcode}</h5>
+          </Box>
+        ))}
+      {isDialogOpen && (
+        <>
+          <DummyDuplicatesPreview
+            type={type}
+            barcode={barcode}
+            setIsDialogOpen={setIsDialogOpen}
+            dummyDuplicatesData={dummyDuplicatesData}
+          />
+        </>
+      )}
+      <Backdrop
+        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={openLoader}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+    </AntdesignLayout>
+  );
+};
+
+export default DummyDuplicates;
diff --git a/src/Components/DummyDuplicatesPreview.jsx b/src/Components/DummyDuplicatesPreview.jsx
new file mode 100644
index 0000000..29991d3
--- /dev/null
+++ b/src/Components/DummyDuplicatesPreview.jsx
@@ -0,0 +1,304 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import CloseIcon from "@mui/icons-material/Close";
+import Slide from "@mui/material/Slide";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import { Box } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import TextInputField from "./TextInputField";
+
+import { useEffect, useState } from "react";
+
+import LoadingContainer from "./LoadingContainer";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default function DummyDuplicatesPreview({
+  type,
+  barcode,
+  dummyDuplicatesData,
+  setIsDialogOpen,
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  const [scaleWidthValue, setScaleWidthValue] = React.useState(80);
+  const [rotateValue, setRotateValue] = React.useState(0);
+  const [partAResults, setPartAResults] = React.useState([]);
+  const [partCResults, setPartCResults] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [partAImageIndex, setPartAImageIndex] = React.useState(0);
+  const [partCImageIndex, setPartCImageIndex] = React.useState(0);
+  const [inputBarcode, setInputBarcode] = useState(null);
+  const [inputSerialNo, setInputSerialNo] = useState(null);
+  const [inputSubjectCode,setInputSubjectCode] = useState(null)
+  const [inputRegisterNumber,setInputRegisterNumber] = useState(null)
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setIsDialogOpen(false);
+  };
+
+  React.useEffect(() => {
+    handleClickOpen();
+  }, []);
+
+  useEffect(() => {
+    console.log("fetchDuplicateBarcodeInfo .........");
+    const fetchDuplicateBarcodeInfo = async () => {
+      setIsLoading(true);
+      console.log("fetching barcode info .....");
+      try {
+        const response = await fetch(
+          `${
+            import.meta.env.VITE_REACT_APP_BACKEND_URL
+          }/fetchDummyDuplicateBarcodeInfo`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              type,
+              barcode,
+            }),
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const responseData = await response.json();
+        setIsLoading(false);
+        console.log("Barcode info Response Data ==== ", responseData);
+        if (responseData?.status == "success") {
+          console.log("success");
+          setIsLoading(false);
+          setPartAResults(responseData?.part_a_results);
+          setPartCResults(responseData?.part_c_results);
+        }
+      } catch (error) {
+        setIsLoading(false);
+        throw new Error(error);
+      }
+    };
+    fetchDuplicateBarcodeInfo();
+  }, []);
+
+  const ZoomInImage = () => {
+    console.log("Zooming In Image ....");
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newScaleWidthValue = scaleWidthValue + 10;
+      setScaleWidthValue(newScaleWidthValue);
+      // ele.style.transform = `scale(${newScaleValue})`;
+      ele.style.width = `${newScaleWidthValue}%`;
+    }
+  };
+
+  const ZoomOutImage = () => {
+    console.log("Zooming Out Image ....");
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newScaleWidthValue = scaleWidthValue - 10;
+      setScaleWidthValue(newScaleWidthValue);
+      // ele.style.transform = `scale(${newScaleValue})`;
+      ele.style.width = `${newScaleWidthValue}%`;
+    }
+  };
+
+  const RotateImageLeft = () => {
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newRotateValue = rotateValue - 90;
+      setRotateValue(newRotateValue);
+      ele.style.transform = `rotate(${newRotateValue}deg)`;
+    }
+  };
+
+  const RotateImageRight = () => {
+    const elements = document.getElementsByClassName("scanned-img");
+    for (var ele of elements) {
+      console.log("Ele is : ", ele);
+      const newRotateValue = rotateValue + 90;
+      setRotateValue(newRotateValue);
+      ele.style.transform = `rotate(${newRotateValue}deg)`;
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Transition}
+        style={{
+          zIndex: "100",
+        }}
+      >
+        <AppBar sx={{ position: "relative" }}>
+          <Toolbar>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handleClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              onClick={ZoomInImage}
+              aria-label="zoom in"
+            >
+              <ZoomInIcon />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              onClick={ZoomOutImage}
+              aria-label="zoom out"
+            >
+              <ZoomOutIcon />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              onClick={RotateImageLeft}
+              aria-label="rotate"
+            >
+              <RotateRightIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+        <div
+          className="overflow-auto"
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            overflow: "auto",
+          }}
+        >
+          {/* <img
+            className="scanned-img"
+            style={{ marginTop: "60%" }}
+            width={`${scaleWidthValue}%`}
+            //   src={`https://docs.exampaper.vidh.ai/${imagePath}`}
+            alt="S3 Image"
+          /> */}
+          <Box className="d-flex flex-row">
+            <Box className="rounded bg-white d-flex flex-column align-items-center">
+              <Box>
+                <Box className="text-center">
+                  {partAImageIndex + 1 + "/" + partAResults.length}
+                </Box>
+                <Button
+                  className="bg-primary text-white m-3"
+                  onClick={() => {
+                    if (partAImageIndex !== 0) {
+                      setPartAImageIndex((prev) => prev - 1);
+                    }
+                  }}
+                >
+                  <ArrowBackIcon />
+                </Button>
+                <Button
+                  className="bg-primary text-white m-3"
+                  onClick={() => {
+                    console.log("partAimage Index === ", partAImageIndex);
+                    if (partAImageIndex < partAResults.length - 1) {
+                      setPartAImageIndex((prev) => prev + 1);
+                    }
+                  }}
+                >
+                  <ArrowForwardIcon />
+                </Button>
+              </Box>
+              {partAResults.length > 0 && (
+                <img
+                  src={`https://docs.exampaper.vidh.ai/${partAResults[partAImageIndex]?.s3_path}`}
+                  width={"900px"}
+                />
+              )}
+            </Box>
+            <Box className="rounded bg-white d-flex flex-column align-items-center">
+              <Box>
+                <Box className="text-center">
+                  {partCImageIndex + 1 + "/" + partCResults.length}
+                </Box>
+                <Button
+                  className="bg-primary text-white m-3"
+                  onClick={() => {
+                    if (partCImageIndex !== 0) {
+                      setPartCImageIndex((prev) => prev - 1);
+                    }
+                  }}
+                >
+                  <ArrowBackIcon />
+                </Button>
+                <Button
+                  className="bg-primary text-white m-3"
+                  onClick={() => {
+                    console.log("partCimage Index === ", partCImageIndex);
+                    if (partCImageIndex < partCResults.length - 1) {
+                      setPartCImageIndex((prev) => prev + 1);
+                    }
+                  }}
+                >
+                  <ArrowForwardIcon />
+                </Button>
+              </Box>
+              {partCResults.length > 0 && (
+                <img
+                  src={`https://docs.exampaper.vidh.ai/${partCResults[partCImageIndex]?.s3_path}`}
+                  width={"900px"}
+                />
+              )}
+            </Box>
+          </Box>
+        </div>
+        <Box className="d-flex justify-content-center align-items-center gap-3 m-3">
+          <TextInputField
+            value={inputBarcode}
+            setValue={setInputBarcode}
+            placeholder={"Barcode"}
+          />
+          <TextInputField
+            value={inputSerialNo}
+            setValue={setInputSerialNo}
+            placeholder={"Serial No"}
+          />
+          <TextInputField
+            value={inputSubjectCode}
+            setValue={setInputSubjectCode}
+            placeholder={"Subject Code"}
+          />
+          <TextInputField
+            value={inputRegisterNumber}
+            setValue={setInputRegisterNumber}
+            placeholder={"Register Number"}
+          />
+          <Button
+            className="bg-primary rounded text-white px-5"
+            style={{ height: "50px" }}
+          >
+            Update
+          </Button>
+        </Box>
+      </Dialog>
+      {isLoading && <LoadingContainer />}
+    </React.Fragment>
+  );
+}
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 45677bd..a9329d4 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -44,6 +44,10 @@ const Home = () => {
       title:"PlayGrounds",
       url:"/Playgrounds"
     },
+    {
+      title:"Part-A Dummy Duplicates",
+      url:"/DummyDuplicates/PartA"
+    },
     // {
     //   title:"Revaluation",
     //   url:"/revaluation"