// import React, { useState } from "react";
// import {
//   DesktopOutlined,
//   FileOutlined,
//   PieChartOutlined,
//   TeamOutlined,
//   UserOutlined,
// } from "@ant-design/icons";
// import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
// import BookletInput from "./BookletInput";
// import { Box, Button } from "@mui/material";
// import { useEffect } from "react";
// import TextField from "@mui/material/TextField";
// import EditButton from "./EditButton";
// import { width } from "@mui/system";
// import { ToastContainer, toast } from "react-toastify";
// import "react-toastify/dist/ReactToastify.css";
// import { TablePagination } from "@mui/base/TablePagination";
// import TableComponent from "./TableComponent";
// 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 { updateAttendenceAnomolyData } from "../redux/actions/actions";
// import { useDispatch, useSelector } from "react-redux";
// import SystemNumberDialog from "./SystemNumberDialog";

// const { Header, Content, Footer, Sider } = Layout;
// function getItem(label, key, icon, children) {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   };
// }


// const items = [getItem("Reassigned Booklet No", "1", <PieChartOutlined />)];

// const AnomolyReassigned = () => {
//   const [collapsed, setCollapsed] = useState(false);
//   const [anomolyData, setAnomolyData] = useState([]);
//   const [filteredAnomolyData,setFilterAnomolyData] = useState([])
//   const [tableRowData, setTableRowData] = useState([]);
//   const [isLoading, setIsLoading] = useState(false);
//   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
//   const [distinctExamCentreCodes,setDistinctExamCentreCodes] = useState([])
//   const dispatch = useDispatch();
//   const reduxAnomolyData = useSelector((state) => state.attendenceAnomolyData);
//   const [filterSelectedExamCentreCode,setFilterSelectedExamCentreCode] = useState("")
//   const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);

//   // Log Redux store state
//   console.log("Redux store state after dispatch:", reduxAnomolyData);
//   const reduxSystemNo = useSelector((state) => state?.systemNumber);
//   console.log("redux system no: ", reduxSystemNo)

//   useEffect(()=>{
//     if(!reduxSystemNo){
//         setShowSystemNoContainer(true);
//     }else{
//         fetchAnomalyData(reduxSystemNo)
//     }

//   },[])

//   useEffect(() => {
//     const handleResize = () => {
//       setWindowWidth(window.innerWidth);
//     };

//     window.addEventListener("resize", handleResize);

//     return () => {
//       window.removeEventListener("resize", handleResize);
//     };
//   }, []);

//   useEffect(() => {
//     if (windowWidth < 800) {
//       setCollapsed(true);
//     }
//     if (windowWidth > 800) {
//       setCollapsed(false);
//     }
//   }, [windowWidth]);

//   const navigate = useNavigate();
//   function createData(
//     attendence_serial_no,
//     answer_booklet_sno,
//     exam_centre_code,
//     exam_centre,
//     student_name,
//     register_number,
//     reassigned_serial_no
//   ) {
//     return {
//       attendence_serial_no,
//       answer_booklet_sno,
//       exam_centre_code,
//       exam_centre,
//       student_name,
//       register_number,
//       reassigned_serial_no,
//     };
//   }


//   const fetchAnomalyData = (reduxSystemNo) => {
//     console.log("Fetching.......");
//     setIsLoading(true);
//     fetch(
//       `${
//         import.meta.env.VITE_REACT_APP_BACKEND_URL
//       }/fetchAnamolyAttendenceData?sysNo=${reduxSystemNo}`,
//       {
//         method: "GET",
//         headers: {
//           "Content-Type": "application/json",
//         },
//       }
//     )
//       .then((response) => {
//         console.log("Response fetched..");
//         return response.json();
//       })
//       .then((responseData) => {
//         console.log("Response Data is : ", responseData);
//         setIsLoading(false);
//         if (responseData.status === "success") {
//           setAnomolyData(responseData?.data);
//           const tmpExamCentreCodes = [];
//           const distinctExamCentreCodesSet = new Set(distinctExamCentreCodes);
          
//           for (var data of responseData?.data) {
//             if (!distinctExamCentreCodesSet.has(data.exam_centre_code)) {
//               distinctExamCentreCodesSet.add(data.exam_centre_code);
//               tmpExamCentreCodes.push(data.exam_centre_code);
//             }
//             setFilterAnomolyData([...tmpExamCentreCodes])
//           }
          
          
//           setDistinctExamCentreCodes([...distinctExamCentreCodesSet]);
//           console.log("Tmp exam centre code: ", tmpExamCentreCodes);

//           // console.log("Data to be stored in store : ", responseData?.data);
//           dispatch(updateAttendenceAnomolyData(responseData?.data));
//         }
//       })
//       .catch((error) => {
//         console.error("Error fetching data: ", error);
//         setIsLoading(false);
//       });
//   };


//   const handleSystemNoChange = () => {
//     console.log("System No Change is called");
//     setShowSystemNoContainer(true);
//   };

//   useEffect(()=>{
//     console.log("redux sys no: ", reduxSystemNo)
//   },[])

//   const {
//     token: { colorBgContainer, borderRadiusLG },
//   } = theme.useToken();

//   return (
//     <Layout
//       style={{
//         minHeight: "100vh",
//       }}
//     >
//       <ToastContainer />
//       <Sider
//         collapsible
//         collapsed={collapsed}
//         onCollapse={(value) => setCollapsed(value)}
//       >
//         <div className="demo-logo-vertical" />
//         <Menu
//           theme="dark"
//           defaultSelectedKeys={["1"]}
//           mode="inline"
//           items={items}
//         />
//       </Sider>

//       <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">
//                 <Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
//                     {reduxSystemNo && (
//                     <Box
//                         className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3"
//                         style={{ cursor: "pointer" }}
//                         onClick={handleSystemNoChange}
//                     >
//                         <b>System No : </b> {reduxSystemNo}
//                     </Box>
//                     )}
//                 </Box>
//               <Button
//                 className="bg-primary p-1 text-light"
//                 onClick={() => {
//                   navigate("/anomoly/reassigned/stats");
//                 }}
//               >
//                 <QueryStatsIcon />
//               </Button>
//               <Button
//                 className="bg-primary p-1 text-light"
//                 onClick={() => {
//                   navigate("/");
//                 }}
//               >
//                 <HomeIcon />
//               </Button>
//             </Box>
//           </Box>
//         </Header>
//         <Content
//           style={{
//             margin: "16px 16px",
//           }}
//         >
//           <Box className="w-100 d-flex justify-content-between">
//             <Box className="w-100 d-flex justify-content-center">
//               {tableRowData.length > 0 && (
//                 <TableComponent
//                   filterSelectedExamCentreCode = {filterSelectedExamCentreCode}
//                   setFilterSelectedExamCentreCode = {setFilterSelectedExamCentreCode}
//                   rows={tableRowData}
//                   type={"AnomolyReassigned"}
//                   distinctExamCentreCodes = {distinctExamCentreCodes}
//                 />
//               )}
//                 {tableRowData.length == 0 && (
//                 <Box className="w-100 d-flex justify-content-center py-2 align-items-center text-center">
//                   <h6>No Data Found !!</h6>
//                  </Box>
//               )}
//             </Box>
//           </Box>
//         </Content>
//         <Footer
//           style={{
//             textAlign: "center",
//           }}
//         >
//           exampaper.vidh.ai ©{new Date().getFullYear()}
//         </Footer>
//       </Layout>
//       {isLoading && <LoadingContainer loadingText={"Loading"} />}
//       {showSystemNoContainer && (
//         <SystemNumberDialog
//           setShowSystemNoContainer={setShowSystemNoContainer}
//           showSystemNoContainer={showSystemNoContainer}
//         />
//       )}
//     </Layout>
    
//   );
// };
// export default AnomolyReassigned;