From 85dea9a9fd94a0b622a663804de3edd3d4c5b560 Mon Sep 17 00:00:00 2001
From: Ruchi <ruchikhandelwal914@gmail.com>
Date: Fri, 29 Dec 2023 11:32:13 +0530
Subject: [PATCH 1/2] Basic Settings

---
 package-lock.json                          |   3 +-
 src/app/ProjectSettings/page.js            |  87 ++++++++
 src/app/components/Tabs/AnnotatorTable.jsx |   2 +-
 src/app/components/Tabs/BasicSettings.jsx  | 232 +++++++++++++++++++++
 src/app/projectdetails/page.js             |  17 +-
 src/utils/utils.js                         |   5 +
 6 files changed, 338 insertions(+), 8 deletions(-)
 create mode 100644 src/app/ProjectSettings/page.js
 create mode 100644 src/app/components/Tabs/BasicSettings.jsx

diff --git a/package-lock.json b/package-lock.json
index 4e63b343..d52d76c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,10 +15,9 @@
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
         "@mui/styles": "^5.14.18",
+        "@mui/x-date-pickers-pro": "^6.18.4",
         "firebase": "^10.7.1",
         "firebase-auth": "^0.1.2",
-        "@mui/x-date-pickers-pro": "^6.18.4",
-        "firebase": "^10.6.0",
         "mui-datatables": "^4.3.0",
         "next": "14.0.3",
         "react": "^18",
diff --git a/src/app/ProjectSettings/page.js b/src/app/ProjectSettings/page.js
new file mode 100644
index 00000000..4bdf0b80
--- /dev/null
+++ b/src/app/ProjectSettings/page.js
@@ -0,0 +1,87 @@
+'use client'
+import { useState, useEffect } from 'react';
+import { Card, Box, Grid, Typography, Tabs, Tab, Divider } from '@mui/material';
+import BasicSettings from '../components/Tabs/BasicSettings';
+// import AdvancedOperation from '../components/Tabs/AdvancedOperation';
+// import ReadOnlyConfigurations from '../components/Tabs/ReadonlyConfigurations';
+import dynamic from 'next/dynamic';
+
+// Import other necessary components here
+
+
+
+function TabPanel({ children, value, index, ...other}) {
+  return (
+    <div
+        role="tabpanel"
+        hidden={value !== index}
+        id={`simple-tabpanel-${index}`}
+        aria-labelledby={`simple-tab-${index}`}
+        {...other}
+    >
+        {value === index && (
+            <Box p={4}>
+                <Typography>{children}</Typography>
+            </Box>
+        )}
+    </div>
+);
+}
+
+const ProjectSettings = () => {
+  const [tabValue, setTabValue] = useState(0);
+  
+  
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  const tabsLabels = ['Basic', 'Advanced', 'Read-only', 'Logs'];
+
+  return (
+    <Card sx={{ width: '100%', minHeight: 500, padding: 5 }}>
+      <Box>
+      <Grid
+                        item
+                        xs={12}
+                        sm={12}
+                        md={12}
+                        lg={12}
+                        xl={12}
+                        sx={{mb:3,}}
+                    >
+                        <Typography variant="h3" gutterBottom component="div"sx={{fontWeight: '1.6875rem'}}>
+                            Project Settings
+                        </Typography>
+                    </Grid>
+            <Box sx={{mb:2,}} >
+                <Tabs value={tabValue} onChange={handleTabChange} aria-label="user-tabs">
+                    <Tab label="Basic " sx={{ fontSize: 17, fontWeight: '700', marginRight: '28px !important' }} />
+                    <Tab label=" Advanced " sx={{ fontSize: 17, fontWeight: '700' }} />
+                    <Tab label=" Read-only " sx={{ fontSize: 17, fontWeight: '700' }} />
+                    <Tab label=" Logs " sx={{ fontSize: 17, fontWeight: '700' }} />
+                </Tabs>
+            </Box>
+            <Divider/>
+            <Box sx={{ p: 1 }}>
+                <TabPanel value={tabValue} index={0}>
+                <BasicSettings/>  
+                </TabPanel>
+                {/* <TabPanel value={tabValue} index={1}>
+                    <AdvancedOperation />
+                </TabPanel>
+                <TabPanel value={tabValue} index={2}>
+                <ReadOnlyConfigurations />
+                </TabPanel> */}
+                {/* <TabPanel value={tabValue} index={3}>
+                    <ProjectLogs />
+                </TabPanel> */}
+            </Box>
+      </Box>
+    </Card>
+  );
+};
+
+export default ProjectSettings;
+
+
diff --git a/src/app/components/Tabs/AnnotatorTable.jsx b/src/app/components/Tabs/AnnotatorTable.jsx
index 0e86bbeb..5392b37d 100644
--- a/src/app/components/Tabs/AnnotatorTable.jsx
+++ b/src/app/components/Tabs/AnnotatorTable.jsx
@@ -9,7 +9,7 @@ import Link from 'next/link';
 import UserMappedByRole from "../../../utils/UserMappedByRole";
 import CustomButton from "../common/Button";
 import { ThemeProvider,Grid, Dialog, DialogActions, Button, DialogTitle, DialogContent, DialogContentText } from "@mui/material";
-import tableTheme from "../../../themes/TableTheme";
+import tableTheme from "../../../themes/tableTheme";
 // import RemoveWorkspaceMemberAPI from "../../../../redux/actions/api/WorkspaceDetails/RemoveWorkspaceMember";
 import Search from "../common/Search";
 // import RemoveWorkspaceFrozenUserAPI from "../../../../redux/actions/api/WorkspaceDetails/RemoveWorkspaceFrozenUser";
diff --git a/src/app/components/Tabs/BasicSettings.jsx b/src/app/components/Tabs/BasicSettings.jsx
new file mode 100644
index 00000000..a1e8b8f5
--- /dev/null
+++ b/src/app/components/Tabs/BasicSettings.jsx
@@ -0,0 +1,232 @@
+import { Grid, Typography, TextField,ThemeProvider } from "@mui/material";
+import themeDefault from '../../../themes/theme';
+import OutlinedTextField from "../common/OutlinedTextField";
+import DatasetStyle from "../../../styles/Dataset";
+import CustomButton from "../common/Button";
+import CustomizedSnackbars from "../common/Snackbar";
+import {useState} from "react";
+import Spinner from "../common/Spinner";
+
+const BasicSettings = () => {
+    const [snackbar, setSnackbarInfo] = useState({
+        open: false,
+        message: "",
+        variant: "success",
+    });
+    const [sourceLanguage, setSourceLanguage] = useState("");
+    const [targetLanguage, setTargetLanguage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [newDetails, setNewDetails] = useState();
+    const classes = DatasetStyle();
+
+    const handleSave = async () => {
+        // Functionality removed for UI code snippet
+    };
+
+    const handleProjectName = (event) => {
+        event.preventDefault();
+        // Functionality removed for UI code snippet
+    };
+
+    const renderSnackBar = () => {
+        return (
+            <CustomizedSnackbars
+                open={snackbar.open}
+                handleClose={() =>
+                    setSnackbarInfo({ open: false, message: "", variant: "" })
+                }
+                anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                variant={snackbar.variant}
+                message={snackbar.message}
+            />
+        );
+    };
+
+    return (
+        <ThemeProvider theme={themeDefault}>
+            {loading && <Spinner />}
+            <Grid>
+                {renderSnackBar()}
+            </Grid>
+            <Grid
+                container
+                direction='row'
+                justifyContent='center'
+                alignItems='center'
+            >
+                <Grid container direction='row' sx={{ alignItems: "center" }}>
+                    <Grid items 
+                            xs={12} 
+                            sm={12}
+                            md={12} 
+                            lg={2}
+                            xl={2}
+                    >
+                        <Typography variant="body2" fontWeight='700' label="Required">
+                            Project Name
+                        </Typography>
+                    </Grid>
+                    <Grid item 
+                            xs={12}
+                            md={12}
+                            lg={9}
+                            xl={9}
+                            sm={12}
+                    >
+                        <OutlinedTextField
+                            fullWidth
+                            name="title"
+                            InputProps={{ style: { fontSize: "14px", width: "500px" } }}
+                            // value={ProjectDetails.title}
+                            value={newDetails?.title}
+                            onChange={handleProjectName} />
+                    </Grid>
+                </Grid>
+                <Grid
+                    container
+                    direction='row'
+                    sx={{
+                        alignItems: "center",
+                        // justifyContent: "space-between",
+                        mt: 2
+                    }}
+                >
+                    <Grid
+                        items
+                        xs={12}
+                        sm={12}
+                        md={12}
+                        lg={2}
+                        xl={2}
+                    >
+
+                        <Typography variant="body2" fontWeight='700'>
+                            Project Description
+                        </Typography>
+                    </Grid>
+                    <Grid
+                        item
+                        xs={12}
+                        md={12}
+                        lg={9}
+                        xl={9}
+                        sm={12}
+
+                    >
+                        <OutlinedTextField
+                            fullWidth
+                            name="description"
+                            InputProps={{ style: { fontSize: "14px", width: "500px" } }}
+                            value={newDetails?.description}
+                            onChange={handleProjectName}
+                        />
+                    </Grid>
+                </Grid>
+
+
+
+                <Grid
+                            container
+                            direction='row'
+                            sx={{
+                                alignItems: "center",
+                                mt: 2
+                            }}
+                        >
+                            <Grid
+                                items
+                                xs={12}
+                                sm={12}
+                                md={12}
+                                lg={2}
+                                xl={2}
+                            >
+                                <Typography variant="body2" fontWeight='700' label="Required">
+                                    Max Pending Tasks Per User
+                                </Typography>
+                            </Grid>
+                            <Grid
+                                item
+                                xs={12}
+                                md={12}
+                                lg={9}
+                                xl={9}
+                                sm={12}
+                            >
+                                <OutlinedTextField
+                                    fullWidth
+                                    name="max_pending_tasks_per_user"
+                                    InputProps={{ step: 1, min: 0, max: 99999, type: 'number', style: { fontSize: "14px", width: "500px" } }}
+                                    value={newDetails?.max_pending_tasks_per_user}
+                                    onChange={handleProjectName} />
+                            </Grid>
+                        </Grid>
+
+                <Grid
+                            container
+                            direction='row'
+                            sx={{
+                                alignItems: "center",
+                                mt: 2
+                            }}
+                        >
+                            <Grid
+                                items
+                                xs={12}
+                                sm={12}
+                                md={12}
+                                lg={2}
+                                xl={2}
+                            >
+                                <Typography variant="body2" fontWeight='700' label="Required">
+                                    Tasks Pull Count Per Batch
+                                </Typography>
+                            </Grid>
+                            <Grid
+                                item
+                                xs={12}
+                                md={12}
+                                lg={9}
+                                xl={9}
+                                sm={12}
+                            >
+                                <OutlinedTextField
+                                    fullWidth
+                                    name="tasks_pull_count_per_batch"
+                                    InputProps={{ step: 1, min: 0, max: 99999, type: 'number', style: { fontSize: "14px", width: "500px" } }}
+                                    value={newDetails?.tasks_pull_count_per_batch}
+                                    onChange={handleProjectName} />
+                            </Grid>
+                        </Grid>
+            
+                    
+                {/* ... Other form fields */}
+                <Grid
+                    container
+                    xs={12}
+                    md={12}
+                    lg={12}
+                    xl={12}
+                    sm={12}
+                    sx={{
+                        m: 7,
+                        // justifyContent: "center",
+
+                    }}
+                >
+                    <CustomButton sx={{ inlineSize: "max-content", marginRight: "10px", width: "80px" }}
+                        onClick={() => navigate(`/projects/:id/`)}
+                        // onClick={handleCancel}
+                        label="Cancel" />
+                    <CustomButton sx={{ inlineSize: "max-content", width: "80px" }}
+                        onClick={handleSave}
+                        label="Save" />
+                </Grid>
+            </Grid>
+        </ThemeProvider>
+    )
+}
+
+export default BasicSettings;
+
+
diff --git a/src/app/projectdetails/page.js b/src/app/projectdetails/page.js
index 02ed9f0b..8d7748eb 100644
--- a/src/app/projectdetails/page.js
+++ b/src/app/projectdetails/page.js
@@ -28,6 +28,10 @@ import {
   import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
   import userRole from "../../utils/UsersRolesList";
   import SuperChecker from "../components/Project/SuperChecker";
+  import { useRouter } from "next/navigation";
+  
+
+  
 
   function TabPanel(props) {
     const { children, value, index, ...other } = props;
@@ -266,8 +270,10 @@ debugger
     let reviewerdata = ProjectDetails?.annotation_reviewers?.filter(
       (x) => x.id == userDetails.id
     );
-  
-
+    const router = useRouter();
+    const handleOpenSettings = () => {
+       router.push('/ProjectSettings');
+    };
   
     let projectValue = "Unassigned Super Check Tasks"
     const filterdata = projectData.filter(item => item.name !== projectValue)
@@ -452,19 +458,20 @@ debugger
                 <Typography variant="h3">{ProjectDetails.title}</Typography>
               </Grid>
   
-              {(userRole.WorkspaceManager === loggedInUserData?.role ||
-                userRole.OrganizationOwner === loggedInUserData?.role ||
-                userRole.Admin === loggedInUserData?.role) && (
+              {(
                   <Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
                     <Tooltip title={translate("label.showProjectSettings")}>
+                    <Link href="/ProjectSettings" passHref>
                       <IconButton
                         sx={{ marginLeft: "140px" }}
+                        onClick={handleOpenSettings}
                       >
                         <SettingsOutlinedIcon
                           color="primary.dark"
                           fontSize="large"
                         />
                       </IconButton>
+                      </Link>
                     </Tooltip>
                   </Grid>
                 )}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index e69de29b..264b74a6 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -0,0 +1,5 @@
+export function snakeToTitleCase(str) {
+    return str.split("_").map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    }).join(" ");
+}
\ No newline at end of file

From 7595619aa4c8758f5dfab520bff6f3dab1fcddd9 Mon Sep 17 00:00:00 2001
From: Ruchi <ruchikhandelwal914@gmail.com>
Date: Wed, 3 Jan 2024 11:55:35 +0530
Subject: [PATCH 2/2] ProjectSettings done

---
 package-lock.json                             | 198 ++++-
 package.json                                  |   5 +-
 src/app/ProjectSettings/page.js               |  21 +-
 .../DeallocationAnnotatorsAndReviewers.jsx    | 581 +++++++++++++++
 .../components/Project/DeleteProjectTasks.jsx | 394 ++++++++++
 .../Project/DownloadProjectButton.jsx         | 119 +++
 .../components/Project/SuperCheckSettings.jsx | 214 ++++++
 src/app/components/Tabs/AdvancedOperation.jsx | 676 ++++++++++++++++++
 src/app/components/Tabs/BasicSettings.jsx     |  52 +-
 .../Tabs/ReadonlyConfigurations.jsx           | 241 +++++++
 .../components/common/ExportProjectDialog.jsx | 104 +++
 src/app/projects/ProjectLogs.js               | 138 ++++
 12 files changed, 2695 insertions(+), 48 deletions(-)
 create mode 100644 src/app/components/Project/DeallocationAnnotatorsAndReviewers.jsx
 create mode 100644 src/app/components/Project/DeleteProjectTasks.jsx
 create mode 100644 src/app/components/Project/DownloadProjectButton.jsx
 create mode 100644 src/app/components/Project/SuperCheckSettings.jsx
 create mode 100644 src/app/components/Tabs/AdvancedOperation.jsx
 create mode 100644 src/app/components/Tabs/ReadonlyConfigurations.jsx
 create mode 100644 src/app/components/common/ExportProjectDialog.jsx
 create mode 100644 src/app/projects/ProjectLogs.js

diff --git a/package-lock.json b/package-lock.json
index d52d76c5..39960ad2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,15 +13,18 @@
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
         "@mui/icons-material": "^5.14.18",
+        "@mui/lab": "^5.0.0-alpha.158",
         "@mui/material": "^5.14.18",
         "@mui/styles": "^5.14.18",
         "@mui/x-date-pickers-pro": "^6.18.4",
+        "date-fns": "^2.30.0",
         "firebase": "^10.7.1",
         "firebase-auth": "^0.1.2",
         "mui-datatables": "^4.3.0",
         "next": "14.0.3",
         "react": "^18",
         "react-date-range": "^1.4.0",
+        "react-datepicker": "^4.25.0",
         "react-dom": "^18",
         "react-router-dom": "^6.20.1"
       },
@@ -238,9 +241,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
-      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
+      "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1345,6 +1348,77 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.158",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.158.tgz",
+      "integrity": "sha512-MNn/J07GAipfElEEzDD9O7KLxz+mKgONJ+zBmlLgcCpDFsOh6nAuVQ2ONbeg1cgV/e553jXv8QHTWSRXw8KX4A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@mui/base": "5.0.0-beta.29",
+        "@mui/system": "^5.15.2",
+        "@mui/types": "^7.2.11",
+        "@mui/utils": "^5.15.2",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.10.11",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/@mui/base": {
+      "version": "5.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.29.tgz",
+      "integrity": "sha512-OXfUssYrB6ch/xpBVHMKAjThPlI9VyGGKdvQLMXef2j39wXfcxPlUVQlwia/lmE3rxWIGvbwkZsDtNYzLMsDUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.11",
+        "@mui/utils": "^5.15.2",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.14.18",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
@@ -1395,12 +1469,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.18.tgz",
-      "integrity": "sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==",
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.2.tgz",
+      "integrity": "sha512-KlXx5TH1Mw9omSY+Q6rz5TA/P71meSYaAOeopiW8s6o433+fnOxS17rZbmd1RnDZGCo+j24TfCavQuCMBAZnQA==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/utils": "^5.14.18",
+        "@babel/runtime": "^7.23.6",
+        "@mui/utils": "^5.15.2",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1408,7 +1482,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
@@ -1421,11 +1495,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.18.tgz",
-      "integrity": "sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==",
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.2.tgz",
+      "integrity": "sha512-fYEN3IZzbebeHwAmQHhxwruiOIi8W74709qXg/7tgtHV4byQSmPgnnKsZkg0hFlzjEbcJIRZyZI0qEecgpR2cg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@babel/runtime": "^7.23.6",
         "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1435,7 +1509,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.4.1",
@@ -1492,15 +1566,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
-      "integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/private-theming": "^5.14.18",
-        "@mui/styled-engine": "^5.14.18",
-        "@mui/types": "^7.2.9",
-        "@mui/utils": "^5.14.18",
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.2.tgz",
+      "integrity": "sha512-I7CzLiHDtU/BTobJgSk+wPGGWG95K8lYfdFEnq//wOgSrLDAdOVvl2gleDxJWO+yAbGz4RKEOnR9KuD+xQZH4A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@mui/private-theming": "^5.15.2",
+        "@mui/styled-engine": "^5.15.2",
+        "@mui/types": "^7.2.11",
+        "@mui/utils": "^5.15.2",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1510,7 +1584,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
@@ -1531,9 +1605,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.9",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.9.tgz",
-      "integrity": "sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==",
+      "version": "7.2.11",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.11.tgz",
+      "integrity": "sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0"
       },
@@ -1544,12 +1618,12 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
-      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.2.tgz",
+      "integrity": "sha512-6dGM9/guFKBlFRHA7/mbM+E7wE7CYDy9Ny4JLtD3J+NTyhi8nd8YxlzgAgTaTVqY0BpdQ2zdfB/q6+p2EdGM0w==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@types/prop-types": "^15.7.10",
+        "@babel/runtime": "^7.23.6",
+        "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -1558,7 +1632,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
@@ -2838,7 +2912,6 @@
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
       "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.21.0"
       },
@@ -5867,6 +5940,23 @@
         "react": "^0.14 || ^15.0.0-rc || >=15.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
+      "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.30.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0",
+        "react-popper": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-display-name": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
@@ -5907,6 +5997,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5928,6 +6023,33 @@
         "react": "0.14 || 15 - 18"
       }
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
+      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.20.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
@@ -7014,6 +7136,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 0e3eeba5..896d43b3 100644
--- a/package.json
+++ b/package.json
@@ -16,15 +16,18 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@mui/icons-material": "^5.14.18",
+    "@mui/lab": "^5.0.0-alpha.158",
     "@mui/material": "^5.14.18",
     "@mui/styles": "^5.14.18",
+    "@mui/x-date-pickers-pro": "^6.18.4",
+    "date-fns": "^2.30.0",
     "firebase": "^10.7.1",
     "firebase-auth": "^0.1.2",
-    "@mui/x-date-pickers-pro": "^6.18.4",
     "mui-datatables": "^4.3.0",
     "next": "14.0.3",
     "react": "^18",
     "react-date-range": "^1.4.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "^18",
     "react-router-dom": "^6.20.1"
   },
diff --git a/src/app/ProjectSettings/page.js b/src/app/ProjectSettings/page.js
index 4bdf0b80..608fd829 100644
--- a/src/app/ProjectSettings/page.js
+++ b/src/app/ProjectSettings/page.js
@@ -2,14 +2,11 @@
 import { useState, useEffect } from 'react';
 import { Card, Box, Grid, Typography, Tabs, Tab, Divider } from '@mui/material';
 import BasicSettings from '../components/Tabs/BasicSettings';
-// import AdvancedOperation from '../components/Tabs/AdvancedOperation';
-// import ReadOnlyConfigurations from '../components/Tabs/ReadonlyConfigurations';
+import AdvancedOperation from '../components/Tabs/AdvancedOperation';
+import ReadonlyConfigurations from '../components/Tabs/ReadonlyConfigurations';
+import ProjectLogs from '../projects/ProjectLogs';
 import dynamic from 'next/dynamic';
 
-// Import other necessary components here
-
-
-
 function TabPanel({ children, value, index, ...other}) {
   return (
     <div
@@ -39,7 +36,7 @@ const ProjectSettings = () => {
   const tabsLabels = ['Basic', 'Advanced', 'Read-only', 'Logs'];
 
   return (
-    <Card sx={{ width: '100%', minHeight: 500, padding: 5 }}>
+    <Card sx={{ width: 'full', minHeight: 500, padding: 5 }}>
       <Box>
       <Grid
                         item
@@ -67,15 +64,15 @@ const ProjectSettings = () => {
                 <TabPanel value={tabValue} index={0}>
                 <BasicSettings/>  
                 </TabPanel>
-                {/* <TabPanel value={tabValue} index={1}>
+                <TabPanel value={tabValue} index={1}>
                     <AdvancedOperation />
                 </TabPanel>
                 <TabPanel value={tabValue} index={2}>
-                <ReadOnlyConfigurations />
-                </TabPanel> */}
-                {/* <TabPanel value={tabValue} index={3}>
+                <ReadonlyConfigurations />
+                </TabPanel>
+                <TabPanel value={tabValue} index={3}>
                     <ProjectLogs />
-                </TabPanel> */}
+                </TabPanel>
             </Box>
       </Box>
     </Card>
diff --git a/src/app/components/Project/DeallocationAnnotatorsAndReviewers.jsx b/src/app/components/Project/DeallocationAnnotatorsAndReviewers.jsx
new file mode 100644
index 00000000..d9119509
--- /dev/null
+++ b/src/app/components/Project/DeallocationAnnotatorsAndReviewers.jsx
@@ -0,0 +1,581 @@
+import React, { useState } from "react";
+import CustomButton from "../common/Button";
+import {
+  Button, Popover,Box,Grid,Typography,Radio,Select,MenuItem,Dialog, DialogActions, DialogContent, DialogContentText,  Checkbox,
+  ListItemText,
+  ListItemIcon,
+} from "@mui/material";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import DatasetStyle from "../../../styles/Dataset";
+import { translate } from "../../../config/localisation";
+import {useParams } from 'react-router-dom';
+import { snakeToTitleCase } from "../../../utils/utils";
+import CustomizedSnackbars from "../common/Snackbar";
+import TextField from '@mui/material/TextField';
+
+
+let AnnotationStatus = [
+  "unlabeled",
+  "skipped",
+  "draft",
+  "labeled",
+  "to_be_revised",
+];
+
+let ReviewStatus =  [
+    "unreviewed",
+    "accepted",
+    "accepted_with_minor_changes",
+    "accepted_with_major_changes",
+    "to_be_revised",
+    "draft",
+    "skipped",
+  ];
+
+  let SuperChecker = ["unvalidated","validated","validated_with_changes","skipped","draft","rejected"];
+  const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+  getContentAnchorEl: null,
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: "center",
+  },
+  transformOrigin: {
+    vertical: "top",
+    horizontal: "center",
+  },
+  variant: "menu",
+};
+export default function DeallocationAnnotatorsAndReviewers() {
+  const classes = DatasetStyle();
+  // const dispatch = useDispatch();
+  const {id} = useParams();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [radiobutton, setRadiobutton] = useState("annotation");
+  const [openDialog, setOpenDialog] = useState(false);
+  const[annotatorsUser,setAnnotatorsUser] = useState("")
+  const[annotationStatus,setAnnotationStatus] = useState([])
+  const[reviewerssUser,setReviewersUser] = useState("")
+  const[superCheckersUser,setSuperCheckersUser] = useState("")
+  const[reviewStatus,setReviewStatus] = useState([])
+  const[superCheckStatus,setSuperCheckStatus] = useState([])
+  const [snackbar, setSnackbarInfo] = useState({
+    open: false,
+    message: "",
+    variant: "success",
+});
+
+
+
+
+  const open = Boolean(anchorEl);
+  const Id = open ? "simple-popover" : undefined;
+
+  // const ProjectDetails = useSelector(state => state.getProjectDetails.data);
+  const handleClickOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setAnnotatorsUser("")
+    setAnnotationStatus([])
+    setReviewersUser("")
+    setReviewStatus([])
+    setSuperCheckersUser("")
+    setSuperCheckStatus([])
+  };
+
+  const handleAnnotation = () => {
+    setRadiobutton("annotation");
+  };
+  const handleReview = () => {
+    setRadiobutton("review");
+  };
+  const handlesuperChecker = () => {
+    setRadiobutton("superChecker");
+  };
+
+  const handleSubmit = () => {
+    setAnchorEl(null);
+    setOpenDialog(true);
+}
+
+const handleCloseDialog = () => {
+    setOpenDialog(false);
+    setAnnotatorsUser("")
+    setAnnotationStatus([])
+    setReviewersUser("")
+    setReviewStatus([])
+    setSuperCheckersUser("")
+    setSuperCheckStatus([])
+};
+
+const handleChangeAnnotationStatus = (event) => {
+    const value = event.target.value;
+    setAnnotationStatus(value);
+  };
+
+  const handleChangeReviewStatus = (event) =>{
+    const value = event.target.value;
+    setReviewStatus(value);
+  }
+  const handleChangeSuperCheckerStatus = (event) =>{
+    const value = event.target.value;
+    setSuperCheckStatus(value);
+  }
+
+  
+
+const handleok = async() => {
+    setAnchorEl(null);
+    setOpenDialog(false);
+    setAnnotatorsUser("")
+    setAnnotationStatus([])
+    setReviewersUser("")
+    setReviewStatus([])
+    setSuperCheckersUser("")
+    setSuperCheckStatus([])
+    const projectObj = new DeallocationAnnotatorsAndReviewersAPI(id,radiobutton,annotatorsUser,reviewerssUser,annotationStatus,reviewStatus,superCheckersUser,superCheckStatus);
+    // dispatch(APITransport(projectObj));
+    const res = await fetch(projectObj.apiEndPoint(), {
+        method: "GET",
+        body: JSON.stringify(projectObj.getBody()),
+        headers: projectObj.getHeaders().headers,
+    });
+    const resp = await res.json();
+    // setLoading(false);
+    if (res.ok) {
+        setSnackbarInfo({
+            open: true,
+            message: resp?.message,
+            variant: "success",
+        })
+       
+    } else {
+        setSnackbarInfo({
+            open: true,
+            message: resp?.message,
+            variant: "error",
+        })
+    }
+}
+
+
+const renderSnackBar = () => {
+    return (
+      <CustomizedSnackbars
+        open={snackbar.open}
+        handleClose={() =>
+          setSnackbarInfo({ open: false, message: "", variant: "" })
+        }
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        variant={snackbar.variant}
+        message={snackbar.message}
+      />
+    );
+  };
+
+  const emailId = localStorage.getItem("email_id");
+  const [password, setPassword] = useState("");
+  const [pin, setPin] = useState("");
+  const handleConfirm = async () => {
+    if(radiobutton === "annotation" || radiobutton === "review"){
+      const apiObj = new LoginAPI(emailId, password);
+      const res = await fetch(apiObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(apiObj.getBody()),
+        headers: apiObj.getHeaders().headers,
+      });
+      const rsp_data = await res.json();
+      if (res.ok) {
+        handleok();
+      }else{
+        window.alert("Invalid credentials, please try again");
+        console.log(rsp_data);
+      }
+    }else if(radiobutton === "superChecker"){
+      if(pin === "9327"){
+        handleok();
+      }else{
+        window.alert("Incorrect pin entered");
+      }
+    }
+  };
+
+  return (
+    <div>
+        {renderSnackBar()}
+      <CustomButton
+        sx={{
+          inlineSize: "max-content",
+          p: 2,
+          borderRadius: 3,
+          ml: 2,
+          width: "300px",
+          mb: 2,
+        }}
+        onClick={handleClickOpen}
+        label="Deallocate User Tasks"
+        color="error"
+      />
+
+      <Popover
+        Id={Id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Grid container className={classes.root}>
+          <Grid item style={{ flexGrow: "1", padding: "10px" }}>
+            <FormControl>
+              <RadioGroup
+                row
+                aria-labelledby="demo-row-radio-buttons-group-label"
+                name="row-radio-buttons-group"
+                defaultValue="annotation"
+              >
+                <FormControlLabel
+                  value="annotation"
+                  control={<Radio />}
+                  label="Annotators"
+                  onClick={handleAnnotation}
+                />
+                <FormControlLabel
+                  value="review"
+                  control={<Radio />}
+                  label="Reviewers"
+                  onClick={handleReview}
+                />
+                <FormControlLabel
+                  value="superChecker"
+                  control={<Radio />}
+                  label="Super Check"
+                  onClick={handlesuperChecker}
+                />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+        </Grid>
+        {radiobutton === "annotation" && (
+          <>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select User:
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+              <FormControl fullWidth size="small">
+                  <Select
+                    labelId="demo-simple-select-helper-label"
+                    id="demo-simple-select-helper"
+                    value={annotatorsUser}
+                    onChange={(e) => setAnnotatorsUser(e.target.value)}
+                    sx={{
+                      textAlign: "left",
+                    }}
+                  >
+                    {/* {ProjectDetails?.annotators?.map((el, i) => {
+                      return <MenuItem value={el.id}>{el.username}</MenuItem>;
+                    })} */}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select Annotation Status :
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+                <FormControl fullWidth size="small">
+
+                <Select
+                labelId="Select-Task-Statuses"
+                multiple
+                value={annotationStatus}
+                onChange={handleChangeAnnotationStatus}
+                renderValue={(annotationStatus) => annotationStatus.join(", ")}
+                MenuProps={MenuProps}
+               
+              >
+                {AnnotationStatus.map((option) => (
+                  <MenuItem
+                    sx={{ textTransform: "capitalize" }}
+                    key={option}
+                    value={option}
+                  >
+                    {/* <ListItemIcon>
+                      <Checkbox checked={annotationStatus.indexOf(option) > -1} />
+                    </ListItemIcon> */}
+                    <ListItemText primary={snakeToTitleCase(option)} />
+                  </MenuItem>
+                ))}
+              </Select>
+                  
+                </FormControl>
+              </Grid>
+            </Grid>
+          </>
+        )}
+        {radiobutton === "review" && (
+          <>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select User:
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+              <FormControl fullWidth size="small">
+                  <Select
+                    labelId="demo-simple-select-helper-label"
+                    id="demo-simple-select-helper"
+                    value={reviewerssUser}
+                     onChange={(e) => setReviewersUser(e.target.value)}
+                    sx={{
+                      textAlign: "left",
+                    }}
+                  >
+                    {}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select Review Status :
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+                <FormControl fullWidth size="small">
+                <Select
+                labelId="Select-Task-Statuses"
+                multiple
+                value={reviewStatus}
+                onChange={handleChangeReviewStatus}
+                renderValue={(reviewStatus) => reviewStatus.join(", ")}
+                MenuProps={MenuProps}
+               
+              >
+                {ReviewStatus.map((option) => (
+                  <MenuItem
+                    sx={{ textTransform: "capitalize" }}
+                    key={option}
+                    value={option}
+                  >
+                    {/* <ListItemIcon>
+                      <Checkbox checked={annotationStatus.indexOf(option) > -1} />
+                    </ListItemIcon> */}
+                    <ListItemText primary={snakeToTitleCase(option)} />
+                  </MenuItem>
+                ))}
+              </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </>
+        )}
+
+   {radiobutton === "superChecker" && (
+          <>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select User:
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+              <FormControl fullWidth size="small">
+                  <Select
+                    labelId="demo-simple-select-helper-label"
+                    id="demo-simple-select-helper"
+                    value={superCheckersUser}
+                     onChange={(e) => setSuperCheckersUser(e.target.value)}
+                    sx={{
+                      textAlign: "left",
+                    }}
+                  >
+                    {}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                p: 1,
+                width:"350px"
+              }}
+            >
+              <Grid items xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Typography variant="body2" fontWeight="700" label="Required">
+                  Select Super Check Status :
+                </Typography>
+              </Grid>
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+                <FormControl fullWidth size="small">
+                <Select
+                labelId="Select-Task-Statuses"
+                multiple
+                value={superCheckStatus}
+                onChange={handleChangeSuperCheckerStatus}
+                renderValue={(superCheckStatus) => superCheckStatus.join(", ")}
+                MenuProps={MenuProps}
+               
+              >
+                {SuperChecker.map((option) => (
+                  <MenuItem
+                    sx={{ textTransform: "capitalize" }}
+                    key={option}
+                    value={option}
+                  >
+                    {/* <ListItemIcon>
+                      <Checkbox checked={annotationStatus.indexOf(option) > -1} />
+                    </ListItemIcon> */}
+                    <ListItemText primary={snakeToTitleCase(option)} />
+                  </MenuItem>
+                ))}
+              </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </>
+        )}
+        
+
+        <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2, p: 1 }}>
+          <Button
+            onClick={handleClose}
+            variant="outlined"
+            color="primary"
+            size="small"
+            className={classes.clearAllBtn}
+          >
+            {" "}
+            {translate("button.clear")}
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            variant="contained"
+            color="primary"
+            size="small"
+            className={classes.clearAllBtn}
+          >
+            {" "}
+            {translate("button.submit")}
+          </Button>
+        </Box>
+      </Popover>
+
+      <Dialog
+                open={openDialog}
+                onClose={handleCloseDialog}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogContent>
+
+                    <DialogContentText id="alert-dialog-description">
+                    Are you sure want to Deallocate User Tasks ? 
+                    </DialogContentText>
+                    {(radiobutton === "annotation" || radiobutton === "review") && <TextField
+                            autoFocus
+                            margin="dense"
+                            id="password"
+                            label="Password"
+                            type="password"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setPassword(e.target.value)}
+                          />}
+                    {radiobutton === "superChecker" && <TextField
+                            autoFocus
+                            margin="dense"
+                            id="pin"
+                            label="Pin"
+                            type="pin"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setPin(e.target.value)}
+                          />}
+                          
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleCloseDialog}
+                        variant="outlined"
+                        color="error"
+                        size="small"
+                        className={classes.clearAllBtn} >
+                          Cancel
+                    </Button>
+                    <Button onClick={handleConfirm}
+                        variant="contained"
+                        color="error"
+                        size="small" className={classes.clearAllBtn} autoFocus >
+                        Confirm
+                    </Button>
+                </DialogActions>
+            </Dialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/Project/DeleteProjectTasks.jsx b/src/app/components/Project/DeleteProjectTasks.jsx
new file mode 100644
index 00000000..636cfaca
--- /dev/null
+++ b/src/app/components/Project/DeleteProjectTasks.jsx
@@ -0,0 +1,394 @@
+import React, { useState } from "react";
+import {
+    Button,
+    Popover,
+    Box,
+    TextField,
+    Grid, Typography,Radio, Dialog, DialogActions, DialogContent, DialogContentText,
+} from "@mui/material";
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import { translate } from "../../../config/localisation";
+import DatasetStyle from "../../../styles/Dataset";
+import CustomizedSnackbars from "../common/Snackbar";
+
+export default function DeleteProjectTasks() {
+    const classes = DatasetStyle();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [projectTaskStartId, setProjectTaskStartId] = useState("");
+    const [projectTaskEndId, setProjectTaskEndId] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [radiobutton, setRadiobutton] = useState(true)
+    const [dataIds, setDataIds] = useState("")
+    const [snackbar, setSnackbarInfo] = useState({
+        open: false,
+        message: "",
+        variant: "success",
+    });
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    };
+    const handleClearSearch = () => {
+        setAnchorEl(null);
+        setProjectTaskStartId();
+        setProjectTaskEndId();
+    };
+
+    const handleDeletebyids = () => {
+        setRadiobutton(true)
+
+    }
+    const handleDeletebyrange = () => {
+        setRadiobutton(false)
+    }
+    const handledataIds = (e,) => {
+        setDataIds(e.target.value);
+
+
+    }
+
+    let datasetitem = dataIds.split(",")
+    var value = datasetitem.map(function (str) {
+        return parseInt(str);
+    });
+
+    const handleok = async() => {
+        setOpenDialog(false);
+        setAnchorEl(null);
+        setProjectTaskStartId();
+        setProjectTaskEndId();
+        let projectObj
+        const ProjectTaskStartAndEndID = {
+            project_task_start_id: parseInt(projectTaskStartId),
+            project_task_end_id: parseInt(projectTaskEndId)
+        }
+        
+
+        const  ProjectTaskIDs = {
+            project_task_ids: value
+        }
+
+        if (radiobutton === true) {
+             projectObj = new DeleteProjectTasksAPI(id, ProjectTaskStartAndEndID)
+
+
+        } else {
+             projectObj = new DeleteProjectTasksAPI(id, ProjectTaskIDs)
+        }
+        const res = await fetch(projectObj.apiEndPoint(), {
+            method: "POST",
+            body: JSON.stringify(projectObj.getBody()),
+            headers: projectObj.getHeaders().headers,
+        });
+        const resp = await res.json();
+        setLoading(false);
+        if (res.ok) {
+            setSnackbarInfo({
+                open: true,
+                message: resp?.message,
+                variant: "success",
+            })
+
+        } else {
+            setSnackbarInfo({
+                open: true,
+                message: resp?.message,
+                variant: "error",
+            })
+        }
+    }
+
+    const handleSearchSubmit = () => {
+        setOpenDialog(true);
+
+    }
+
+
+    const open = Boolean(anchorEl);
+    const Id = open ? 'simple-popover' : undefined;
+
+    const renderSnackBar = () => {
+        return (
+            <CustomizedSnackbars
+                open={snackbar.open}
+                handleClose={() =>
+                    setSnackbarInfo({ open: false, message: "", variant: "" })
+                }
+                anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                variant={snackbar.variant}
+                message={snackbar.message}
+            />
+        );
+    };
+
+    const emailId = localStorage.getItem("email_id");
+    const [password, setPassword] = useState("");
+    const handleConfirm = async () => {
+      const apiObj = new LoginAPI(emailId, password);
+        const res = await fetch(apiObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(apiObj.getBody()),
+        headers: apiObj.getHeaders().headers,
+        });
+        const rsp_data = await res.json();
+        if (res.ok) {
+        handleok();
+        }else{
+        window.alert("Invalid credentials, please try again");
+        console.log(rsp_data);
+        }
+    };
+
+    return (
+        <div >
+            {renderSnackBar()}
+            <Button
+                sx={{
+                    inlineSize: "max-content",
+                    p: 2,
+                    borderRadius: 3,
+                    ml: 2,
+                    width: "300px"
+                }}
+                aria-describedby={Id}
+                variant="contained"
+                onClick={handleClick}
+                color="error">
+                Delete Project Tasks
+            </Button>
+
+            <Popover
+                Id={Id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+
+                  <Grid container className={classes.root} >
+                    <Grid item style={{ flexGrow: "1", padding: "10px" }}>
+                        <FormControl >
+                            <RadioGroup
+                                row
+                                aria-labelledby="demo-row-radio-buttons-group-label"
+                                name="row-radio-buttons-group"
+                                defaultValue="deletebyrange"
+
+                            >
+
+                                <FormControlLabel value="deletebyrange" control={<Radio />} label="Delete by Range" onClick={handleDeletebyids} />
+                                <FormControlLabel value="deletebyids" control={<Radio />} label="Delete by IDs" onClick={handleDeletebyrange} />
+
+                            </RadioGroup>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+              {radiobutton === true &&
+              <>
+                <Grid
+                    container
+                    direction='row'
+                    sx={{
+                        alignItems: "center",
+                        p: 1
+                    }}
+                >
+
+                    <Grid
+                        items
+                        xs={12}
+                        sm={12}
+                        md={12}
+                        lg={5}
+                        xl={5}
+                    >
+                        <Typography variant="body2" fontWeight='700' label="Required">
+                            Project Task Start ID:
+                        </Typography>
+                    </Grid>
+                    <Grid
+                        item
+                        xs={12}
+                        md={12}
+                        lg={12}
+                        xl={6}
+                        sm={6}
+                    >
+                        <TextField
+                            size="small"
+                            variant="outlined"
+                            value={projectTaskStartId}
+                            onChange={(e) => setProjectTaskStartId(e.target.value)}
+                            inputProps={{
+                                style: {
+                                    fontSize: "16px"
+                                }
+                            }}
+                        />
+
+                    </Grid>
+                </Grid>
+                <Grid
+                    container
+                    direction='row'
+                    sx={{
+                        alignItems: "center",
+                        p: 1
+                    }}
+                >
+                    <Grid
+                        items
+                        xs={12}
+                        sm={12}
+                        md={12}
+                        lg={5}
+                        xl={5}
+                    >
+                        <Typography variant="body2" fontWeight='700' label="Required">
+                            Project Task End ID:
+                        </Typography>
+                    </Grid>
+                    <Grid
+                        item
+                        xs={12}
+                        md={12}
+                        lg={12}
+                        xl={6}
+                        sm={6}
+                    >
+                        <TextField
+                            size="small"
+                            variant="outlined"
+                            value={projectTaskEndId}
+                            onChange={(e) => setProjectTaskEndId(e.target.value)}
+                            inputProps={{
+                                style: {
+                                    fontSize: "16px"
+                                }
+                            }}
+                        />
+                    </Grid>
+   
+                </Grid>
+                </>}
+                {radiobutton === false &&
+                    <Grid
+                        container
+                        direction='row'
+                        sx={{
+                            alignItems: "center",
+                            p: 1
+                        }}
+                    >
+                        <Grid
+                            items
+                            xs={12}
+                            sm={12}
+                            md={12}
+                            lg={5}
+                            xl={5}
+                        >
+                            <Typography variant="body2" fontWeight='700' label="Required">
+                            Project Task IDs:
+                            </Typography>
+                        </Grid>
+                        <Grid
+                            item
+                            xs={12}
+                            md={12}
+                            lg={6}
+                            xl={6}
+                            sm={6}
+                        >
+
+                            <TextField
+                                size="small"
+                                variant="outlined"
+                                value={dataIds}
+                                onChange={handledataIds}
+                                inputProps={{
+                                    style: {
+                                        fontSize: "16px"
+                                    }
+                                }}
+                            />
+                        </Grid>
+                    </Grid>
+                }
+
+                <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2, p: 1 }}>
+                    <Button
+                        onClick={handleClearSearch}
+                        variant="outlined"
+                        color="primary"
+                        size="small"
+                        className={classes.clearAllBtn}
+                    >
+                        {" "}
+                        {translate("button.clear")}
+                    </Button>
+                    <Button
+                        onClick={handleSearchSubmit}
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        className={classes.clearAllBtn}
+                    >
+                        {" "}
+                        {translate("button.submit")}
+                    </Button>
+                </Box>
+            </Popover>
+            <Dialog
+                open={openDialog}
+                onClose={handleCloseDialog}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogContent>
+
+                    <DialogContentText id="alert-dialog-description">
+                    Are you  sure want to delete these tasks? Please note this action cannot be undone.
+                    </DialogContentText>
+                    <TextField
+                            autoFocus
+                            margin="dense"
+                            id="password"
+                            label="Password"
+                            type="password"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleCloseDialog}
+                        variant="outlined"
+                        color="error"
+                        size="small"
+                        className={classes.clearAllBtn} >
+                            Cancel
+                    </Button>
+                    <Button onClick={handleConfirm}
+                        variant="contained"
+                        color="error"
+                        size="small" className={classes.clearAllBtn} autoFocus >
+                        Confirm
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}
diff --git a/src/app/components/Project/DownloadProjectButton.jsx b/src/app/components/Project/DownloadProjectButton.jsx
new file mode 100644
index 00000000..565ccaea
--- /dev/null
+++ b/src/app/components/Project/DownloadProjectButton.jsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from "react";
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import CustomizedSnackbars from "../common/Snackbar";
+
+const StyledMenu = styled((props) => (
+  <Menu
+    elevation={3}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 6,
+    marginTop: theme.spacing(1),
+    minWidth: 100,
+
+
+  },
+}));
+
+
+function DownloadProjectButton(props) {
+  const { taskStatus,SetTask,downloadMetadataToggle} = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [downloadres, setdownloadres] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const[taskValue ,setTaskValue]= useState(taskStatus);
+  const open = Boolean(anchorEl);
+  const { id } = useParams();
+  const [snackbar, setSnackbarInfo] = useState({
+    open: false,
+    message: "",
+    variant: "success",
+  });
+
+  useEffect(() => {
+  }, [])
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+
+  };
+  const handleDownloadJSONProject = async () => {
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDownloadCSVProject = async () => {
+    setLoading(true)
+  };
+
+  const handleDownloadTSVProject = async () => {
+    setLoading(true)
+  };
+ 
+  const renderSnackBar = () => {
+    return (
+      <CustomizedSnackbars
+        open={snackbar.open}
+        handleClose={() =>
+          setSnackbarInfo({ open: false, message: "", variant: "" })
+        }
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        variant={snackbar.variant}
+        message={snackbar.message}
+      />
+    );
+  };
+  return (
+    <div>
+      {renderSnackBar()}
+      <Button
+        sx={{ inlineSize: "max-content", p: 2, borderRadius: 3, ml: 2,width:"300px" }}
+        id="demo-customized-button"
+        variant="contained"
+        disabled= {taskStatus.length > 0 ? false: true } 
+        onClick={handleClick}
+        endIcon={<KeyboardArrowDownIcon />}
+      >
+        Download Project
+      </Button>
+      <StyledMenu
+        sytle={{ width: "20px" }}
+        id="demo-customized-menu"
+        MenuListProps={{
+          'aria-labelledby': 'demo-customized-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+
+      >
+        <MenuItem onClick={handleDownloadCSVProject}>
+          CSV
+        </MenuItem>
+        <MenuItem onClick={handleDownloadTSVProject}>
+          TSV
+        </MenuItem>
+        <MenuItem onClick={handleDownloadJSONProject} >
+          JSON
+        </MenuItem>
+      </StyledMenu>
+    </div>
+  );
+}
+export default DownloadProjectButton;
\ No newline at end of file
diff --git a/src/app/components/Project/SuperCheckSettings.jsx b/src/app/components/Project/SuperCheckSettings.jsx
new file mode 100644
index 00000000..4abe1058
--- /dev/null
+++ b/src/app/components/Project/SuperCheckSettings.jsx
@@ -0,0 +1,214 @@
+import React, { useState } from "react";
+import {
+    Button,
+    Popover,
+    Box,
+    TextField,
+    Grid, Typography, Radio, Dialog, DialogActions, DialogContent, DialogContentText,
+} from "@mui/material";
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import { translate } from "../../../config/localisation";
+import DatasetStyle from "../../../styles/Dataset";
+import { useParams } from 'react-router-dom';
+import CustomizedSnackbars from "../common/Snackbar";
+
+
+export default function SuperCheckSettings(props) {
+    const{ProjectDetails}=props
+    const classes = DatasetStyle();
+    const { id } = useParams();
+    const dispatch = useDispatch();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [supercheckLoopCount, setSupercheckLoopCount] = useState(ProjectDetails.revision_loop_count);
+    const [supercheckvalue, setSupercheckvalue] = useState(ProjectDetails.k_value);
+    const [loading, setLoading] = useState(false);
+
+
+    const [snackbar, setSnackbarInfo] = useState({
+        open: false,
+        message: "",
+        variant: "success",
+    });
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleSubmit = async () => {
+        const data = {
+            revision_loop_count: supercheckLoopCount,
+            k_value: supercheckvalue
+        }
+        setAnchorEl(null);
+        setSupercheckLoopCount();
+        setSupercheckvalue();
+        let projectObj = new SuperCheckSettingsAPI(id, data)
+        const res = await fetch(projectObj.apiEndPoint(), {
+            method: "PATCH",
+            body: JSON.stringify(projectObj.getBody()),
+            headers: projectObj.getHeaders().headers,
+        });
+        const resp = await res.json();
+        setLoading(false);
+        if (res.ok) {
+            setSnackbarInfo({
+                open: true,
+                message: "success",
+                variant: "success",
+            })
+
+        } else {
+            setSnackbarInfo({
+                open: true,
+                message: resp?.message,
+                variant: "error",
+            })
+        }
+    }
+
+
+
+    const open = Boolean(anchorEl);
+    const Id = open ? 'simple-popover' : undefined;
+
+    const renderSnackBar = () => {
+        return (
+            <CustomizedSnackbars
+                open={snackbar.open}
+                handleClose={() =>
+                    setSnackbarInfo({ open: false, message: "", variant: "" })
+                }
+                anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                variant={snackbar.variant}
+                message={snackbar.message}
+            />
+        );
+    };
+
+    return (
+        <div >
+            {renderSnackBar()}
+            <Button
+                sx={{
+                    inlineSize: "max-content",
+                    p: 2,
+                    borderRadius: 3,
+                    ml: 2,
+                    width: "300px"
+                }}
+                aria-describedby={Id}
+                variant="contained"
+                onClick={handleClick}
+            >
+                Super Check Settings
+            </Button>
+
+            <Popover
+                Id={Id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                PaperProps={{
+                    style: { width: '330px' },
+                  }}
+            >
+
+
+                <Grid
+                    container
+                    direction="row"
+                    sx={{
+                        alignItems: "center",
+                        p: 1,
+                        mt:2
+
+                    }}
+                >
+                    <Grid items xs={12} sm={12} md={9} lg={9} xl={9}>
+                        <Typography variant="body2" fontWeight="700" label="Required">
+                            Super Checking K% value:
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} md={9} lg={9} xl={9} sm={12}>
+                        <TextField
+                            size="small"
+                            variant="outlined"
+                            value={supercheckvalue}
+                            onChange={(e) => setSupercheckvalue(e.target.value)}
+                            inputProps={{
+                                style: {
+                                    fontSize: "16px"
+                                }
+                            }}
+                        />
+
+                    </Grid>
+                </Grid>
+                <Grid
+                    container
+                    direction="row"
+                    sx={{
+                        alignItems: "center",
+                        p: 1,
+
+                    }}
+                >
+                    <Grid items xs={12} sm={12} md={9} lg={9} xl={9}>
+                        <Typography variant="body2" fontWeight="700" label="Required">
+                            Super Check Revision Loop Count :
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} md={9} lg={9} xl={9} sm={12}>
+                        <TextField
+                            size="small"
+                            variant="outlined"
+                            value={supercheckLoopCount}
+                            onChange={(e) => setSupercheckLoopCount(e.target.value)}
+                            inputProps={{
+                                style: {
+                                    fontSize: "16px"
+
+                                }
+                            }}
+                        />
+
+                    </Grid>
+                </Grid>
+
+
+                <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2, p: 1 }}>
+                    <Button
+                        onClick={handleClose}
+                        variant="outlined"
+                        color="primary"
+                        size="small"
+                        className={classes.clearAllBtn}
+                    >
+                        {" "}
+                        {translate("button.clear")}
+                    </Button>
+                    <Button
+                        onClick={handleSubmit}
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        className={classes.clearAllBtn}
+                    >
+                        {" "}
+                        {translate("button.submit")}
+                    </Button>
+                </Box>
+            </Popover>
+
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/components/Tabs/AdvancedOperation.jsx b/src/app/components/Tabs/AdvancedOperation.jsx
new file mode 100644
index 00000000..be8e8e54
--- /dev/null
+++ b/src/app/components/Tabs/AdvancedOperation.jsx
@@ -0,0 +1,676 @@
+import {
+    Grid,
+    ThemeProvider,
+    Select,
+    Box,
+    Button,
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Checkbox,
+    ListItemText,
+    ListItemIcon,
+    Card,
+    Typography,
+  } from "@mui/material";
+  import React, { useEffect, useState } from "react";
+  import themeDefault from "../../../themes/theme";
+  import { Link, useNavigate, useParams } from "react-router-dom";
+  import DatasetStyle from "../../../styles/Dataset";
+  import CustomButton from "../common/Button";
+  import Dialog from "@mui/material/Dialog";
+  import DialogActions from "@mui/material/DialogActions";
+  import DialogContent from "@mui/material/DialogContent";
+  import DialogContentText from "@mui/material/DialogContentText";
+  import DownloadProjectButton from "../Project/DownloadProjectButton";
+  import CustomizedSnackbars from "../common/Snackbar";
+  import Spinner from "../common/Spinner";
+  import FormControlLabel from "@mui/material/FormControlLabel";
+  import Switch from "@mui/material/Switch";
+  import Paper from "@mui/material/Paper";
+  import { styled } from "@mui/material/styles";
+  import DeleteProjectTasks from "../Project/DeleteProjectTasks";
+  import { snakeToTitleCase } from "../../../utils/utils";
+  import ExportProjectDialog from "../common/ExportProjectDialog";
+  import DeallocationAnnotatorsAndReviewers from "../Project/DeallocationAnnotatorsAndReviewers";
+  import SuperCheckSettings from "../Project/SuperCheckSettings";
+  import userRole from "../../../utils/Role";
+  import TextField from '@mui/material/TextField';
+  
+  
+  const ProgressType = [
+    "incomplete",
+    "annotated",
+    "reviewed",
+    "super_checked",
+    "exported",
+  ];
+  const projectStage = [{name:"Annotation Stage",value: 1 ,disabled:false}, {name:"Review Stage",value: 2,disabled:false} ,{name:"Super Check Stage",value: 3,disabled:false}]
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center",
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "center",
+    },
+    variant: "menu",
+  };
+  const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: "center",
+    color: theme.palette.text.secondary,
+  }));
+  const AdvancedOperation = (props) => {
+    const [snackbar, setSnackbarInfo] = useState({
+      open: false,
+      message: "",
+      variant: "success",
+    });
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [newDetails, setNewDetails] = useState();
+    const [OpenExportProjectDialog, setOpenExportProjectDialog] = useState(false);
+    const [datasetId, setDatasetId] = useState("");
+    const [projectType, setProjectType] = useState("");
+    const [taskReviews,setTaskReviews] = useState( "")
+    const { id } = useParams();
+    const classes = DatasetStyle();
+  
+    const [taskStatus, setTaskStatus] = useState(/*isSuperChecker ?["incomplete", "annotated", "reviewed", "super_checked", "exported", ]:*/[ "incomplete", "annotated","reviewed","super_checked","exported",]);
+  
+    let ProgressTypeValue = "super_checked"
+    const filterdata = ProgressType.filter(item => item !== ProgressTypeValue)
+
+    useEffect(() => {
+    //  setProjectType(ProjectTypes.input_dataset?.class)
+    }, [])
+  
+    useEffect(() => {
+    //   getProjectDetails();
+    }, []);
+  
+    useEffect(() => {
+    //   setNewDetails({
+    //     title: ProjectDetails.title,
+    //     description: ProjectDetails.description,
+    //   });
+    //   setTaskReviews(ProjectDetails.project_stage)
+    },[]);
+  
+    useEffect(() => {
+    //   const typesObj = new GetProjectTypeDetailsAPI(ProjectDetails?.project_type);
+    //   dispatch(APITransport(typesObj));
+    }, []);
+  
+   
+    const getExportProjectButton = async () => {
+      setOpenExportProjectDialog(false);
+      const projectObj =
+        ProjectTypes?.output_dataset?.save_type === "new_record"
+          ? new GetExportProjectButtonAPI(
+              id,
+              ProjectDetails?.datasets[0].instance_id,
+              datasetId,
+              ProjectTypes?.output_dataset?.save_type
+            )
+          : new GetExportProjectButtonAPI(id);
+      const res = await fetch(projectObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(projectObj.getBody()),
+        headers: projectObj.getHeaders().headers,
+      });
+      const resp = await res.json();
+      setLoading(false);
+      if (res.ok) {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "success",
+        });
+      } else {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "error",
+        });
+      }
+    };
+  
+    const getDownloadProjectAnnotations=async()=>{
+      const projectObj = new getDownloadProjectAnnotationsAPI(id,taskStatus);
+      dispatch(APITransport(projectObj));
+      
+        
+    }
+  
+    const handleReviewToggle = async (e) => {
+      let ProjectStageValue = e.target.value
+      setTaskReviews(e.target.value)
+      
+      if (ProjectStageValue === 1) {
+        const disableSuperchecker = [...projectStage].map((opt) => {
+          if (  opt.value === 3 ) opt.disabled = true;
+          else opt.disabled = false;
+          return opt;
+        })
+       
+        setTaskReviews(disableSuperchecker);
+      }
+      else if (ProjectStageValue === 2) {
+        const disableSuperchecker = [...projectStage].map((opt) => {
+          if (  opt.value === 3 ) opt.disabled = false;
+          else opt.disabled = false;
+          return opt;
+  
+        });
+        
+        setTaskReviews(disableSuperchecker);
+      }
+      else if (ProjectStageValue === 3) {
+        const disableSuperchecker = [...projectStage].map((opt) => {
+          if (  opt.value === 1 ) opt.disabled = true;
+          else opt.disabled = false;
+          return opt;
+  
+        });
+      
+        setTaskReviews(disableSuperchecker);
+      }
+  
+      setLoading(true); 
+      const reviewObj =  new TaskReviewsAPI(id,e.target.value);
+      const res = await fetch(reviewObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(reviewObj.getBody()),
+        headers: reviewObj.getHeaders().headers,
+      });
+      const resp = await res.json();
+      setLoading(false);
+      if (res.ok) {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "success",
+        });
+        const projectObj = new GetProjectDetailsAPI(id);
+        dispatch(APITransport(projectObj));
+      } else {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "error",
+        });
+      }
+    };
+  
+    const handleDownoadMetadataToggle = async () => {
+      setDownloadMetadataToggle((downloadMetadataToggle)=>!downloadMetadataToggle)
+    };
+  
+    const getPublishProjectButton = async () => {
+      const projectObj = new GetPublishProjectButtonAPI(id);
+      const res = await fetch(projectObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(projectObj.getBody()),
+        headers: projectObj.getHeaders().headers,
+      });
+      const resp = await res.json();
+      setLoading(false);
+      if (res.ok) {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "success",
+        });
+      } else {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "error",
+        });
+      }
+    };
+  
+    
+  
+    const getPullNewDataAPI = async () => {
+      const projectObj = new GetPullNewDataAPI(id);
+      const res = await fetch(projectObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(projectObj.getBody()),
+        headers: projectObj.getHeaders().headers,
+      });
+      const resp = await res.json();
+      setLoading(false);
+      if (res.ok) {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "success",
+        });
+      } else {
+        setSnackbarInfo({
+          open: true,
+          message: resp?.message,
+          variant: "error",
+        });
+      }
+    };
+  
+    const [isArchived, setIsArchived] = useState(false);
+    const [downloadMetadataToggle,setDownloadMetadataToggle]=useState(true)
+
+  
+    useEffect(() => {
+    }, []);  
+  
+    const handleDownloadProjectAnnotations = () => {
+      getDownloadProjectAnnotations();
+    };
+    const handleExportProject = () => {
+      getExportProjectButton();
+    };
+    const handlePublishProject = () => {
+      getPublishProjectButton();
+    };
+  
+    const handlePullNewData = () => {
+      getPullNewDataAPI();
+    };
+  
+    const handleClickOpen = () => {
+      setOpen(true);
+    };
+  
+    const handleClose = () => {
+      setOpen(false);
+      setOpenExportProjectDialog(false);
+    };
+  
+    const handleok = () => {
+      getArchiveProjectAPI();
+      getProjectDetails()
+      setIsArchived(!isArchived);
+      setOpen(false);
+    };
+  
+    const handleChange = (event) => {
+      const value = event.target.value;
+      setTaskStatus(value);
+    };
+  
+    const handleOpenExportProjectDialog = () => {
+      setOpenExportProjectDialog(true);
+    };
+  
+    useEffect(() => {
+    }, []);
+  
+  
+    const renderSnackBar = () => {
+      return (
+        <CustomizedSnackbars
+          open={snackbar.open}
+          handleClose={() =>
+            setSnackbarInfo({ open: false, message: "", variant: "" })
+          }
+          anchorOrigin={{ vertical: "top", horizontal: "right" }}
+          variant={snackbar.variant}
+          message={snackbar.message}
+        />
+      );
+    };
+  
+    const emailId = localStorage.getItem("email_id");
+    const [password, setPassword] = useState("");
+    const handleConfirm = async () => {
+      const apiObj = new LoginAPI(emailId, password);
+      const res = await fetch(apiObj.apiEndPoint(), {
+        method: "POST",
+        body: JSON.stringify(apiObj.getBody()),
+        headers: apiObj.getHeaders().headers,
+      });
+      const rsp_data = await res.json();
+      if (res.ok) {
+        handleok();
+      }else{
+        window.alert("Invalid credentials, please try again");
+        console.log(rsp_data);
+      }
+    };
+    return (
+      <ThemeProvider theme={themeDefault}>
+        {loading && <Spinner />}
+        <Grid>{renderSnackBar()}</Grid>
+  
+        <div className={classes.rootdiv}>
+          <Grid
+            container
+            // direction="row"
+            direction="column"
+            xs={12}
+            md={12}
+            lg={4}
+            xl={4}
+            sm={12}
+            spacing={1}
+            rowGap={2}
+            sx={{ float: "left" }}
+            columnSpacing={2}
+          >
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <CustomButton
+                sx={{
+                  inlineSize: "max-content",
+                  pl: 2,
+                  borderRadius: 3,
+                  ml: 2,
+                  width: "300px",
+                }}
+                onClick={handlePublishProject}
+                label="Publish Project"
+              />
+            </Grid>
+  
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <CustomButton
+                sx={{
+                  inlineSize: "max-content",
+                  p: 2,
+                  borderRadius: 3,
+                  ml: 2,
+                  width: "300px",
+                }}
+                color="error"
+                onClick={handleClickOpen}
+                label={isArchived ? "Archived" : "Archive"}
+              />
+            </Grid>
+  
+            <Grid
+              item
+              xs={12}
+              sm={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sx={{ ml: 2, height: "20px", mb: 2 }}
+            >
+              <FormControl size="small" className={classes.formControl}>
+                <InputLabel
+                  id="Select-Task-Statuses"
+                  sx={{ fontSize: "16px", padding: "3px" }}
+                >
+                  Select Task Statuses
+                </InputLabel>
+                <Select
+                  labelId="Select-Task-Statuses"
+                  label="Select Task Statuses"
+                  multiple
+                  value={taskStatus}
+                  onChange={handleChange}
+                  renderValue={(taskStatus) => taskStatus.join(", ")}
+                  MenuProps={MenuProps}
+                >
+                  {/* {FilterProgressType.map((option) => (
+                    <MenuItem
+                      sx={{ textTransform: "capitalize" }}
+                      key={option}
+                      value={option}
+                    >
+                      <ListItemIcon>
+                        <Checkbox checked={taskStatus.indexOf(option) > -1} />
+                      </ListItemIcon>
+                      <ListItemText primary={snakeToTitleCase(option)} />
+                    </MenuItem>
+                  ))} */}
+                </Select>
+              </FormControl>
+            </Grid>
+          </Grid>
+  
+          <Grid
+            container
+            // direction="row"
+            xs={12}
+            md={12}
+            lg={4}
+            xl={4}
+            sm={12}
+            spacing={1}
+            rowGap={2}
+            sx={{ float: "left" }}
+            columnSpacing={2}
+          >
+            {/*ProjectDetails.project_type=='ContextualTranslationEditing'?*/(
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                md={12}
+                lg={12}
+                xl={12}
+  
+            >
+                <CustomButton
+                    sx={{
+                        inlineSize: "max-content",
+                        p: 2,
+                        borderRadius: 3,
+                        ml: 2,
+                        width: "300px",
+  
+                    }}
+                    onClick={handleDownloadProjectAnnotations}
+                    label="Downoload Project Annotations" />
+            </Grid>)/*:" "*/}
+            {/* <div className={classes.divider} ></div> */}
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              {/*ProjectTypes?.output_dataset?.save_type === "new_record" ? */(
+                <CustomButton
+                  sx={{
+                    inlineSize: "max-content",
+                    p: 2,
+                    borderRadius: 3,
+                    ml: 2,
+                    width: "300px",
+                  }}
+                  onClick={handleOpenExportProjectDialog}
+                  label="Export Project into Dataset"
+                />
+              )/* : (
+                <CustomButton
+                  sx={{ 
+                    inlineSize: "max-content",
+                    p: 2,
+                    borderRadius: 3,
+                    ml: 2,
+                    width: "300px",
+                  }}
+                  onClick={handleExportProject}
+                  label="Export Project into Dataset"
+                />
+                )*/}
+            </Grid>
+  
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              {/*ProjectDetails.sampling_mode == "f" || ProjectDetails.sampling_mode == "b" ? */(
+                <CustomButton
+                  sx={{
+                    inlineSize: "max-content",
+                    p: 2,
+                    borderRadius: 3,
+                    ml: 2,
+                    width: "300px",
+                  }}
+                  onClick={handlePullNewData}
+                  label="Pull New Data Items from Source Dataset"
+                />
+              )/* : (
+                " "
+              )*/}
+            </Grid>
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <DownloadProjectButton
+                taskStatus={taskStatus}
+                SetTask={setTaskStatus}
+                downloadMetadataToggle={downloadMetadataToggle}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+            <DeleteProjectTasks/>  {/* <DeleteProjectTasks /> */}
+            </Grid>
+           <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <DeallocationAnnotatorsAndReviewers />
+            </Grid>
+            
+          </Grid>
+  
+          <Grid
+            container
+            // direction="row"
+            xs={12}
+            md={12}
+            lg={4}
+            xl={4}
+            sm={12}
+            spacing={1}
+            rowGap={2}
+            columnSpacing={2}
+            sx={{mb:"10px"}}
+          >
+            {/* <div className={classes.divider} ></div> */}
+            {/* <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <FormControlLabel
+                control={<Switch color="primary" />}
+                label="Task Reviews"
+                labelPlacement="start"
+                checked={ProjectDetails.enable_task_reviews}
+                onChange={handleReviewToggle}
+              />
+            </Grid> */}
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}             
+             sx={{ ml: 2 }}
+           >
+              <FormControl  size="small" className={classes.formControl}>
+                <InputLabel id="task-Reviews-label" sx={{ fontSize: "16px" }}>
+                Project Stage
+                </InputLabel>
+                <Select
+                  labelId="task-Reviews-label"
+                  id="task-Reviews-select"
+                  value={taskReviews}
+                  label="Task Reviews"
+                  onChange={handleReviewToggle}
+                  // getOptionDisabled={(option) => option.disabled}
+                >
+                  {projectStage.map((type, index) => (
+                    <MenuItem value={type.value} key={index} disabled={type.disabled} >
+                      {type.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Grid>
+  
+          {/*((userRole.WorkspaceManager === loggedInUserData?.role ||
+        userRole.OrganizationOwner === loggedInUserData?.role ||
+        userRole.Admin === loggedInUserData?.role) ? ProjectDetails?.project_stage == 3 : false ||
+      ProjectDetails?.review_supercheckers?.some(
+        (superchecker) => superchecker.id === loggedInUserData?.id
+      )) &&
+            <Grid item xs={12} sm={12} md={12} lg={6} xl={6}             
+           >
+               <SuperCheckSettings ProjectDetails={ProjectDetails}/>
+      </Grid>*/}
+          </Grid>
+  
+  
+         
+  
+          <Grid
+            container
+            // direction="row"
+            xs={12}
+            md={12}
+            lg={4}
+            xl={4}
+            sm={12}
+            spacing={1}
+            rowGap={2}
+            columnSpacing={2}
+            sx={{mt:1}}
+          >
+            {/* <div className={classes.divider} ></div> */}
+            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <FormControlLabel
+                control={<Switch color="primary" />}
+                label="Download Metadata"
+                labelPlacement="start"
+                checked={downloadMetadataToggle}
+                onChange={handleDownoadMetadataToggle}
+              />
+            </Grid>
+          </Grid>
+  
+          <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogContent>
+              <DialogContentText id="alert-dialog-description">
+                Are you sure you want to {!isArchived ? "archive" : "unarchive"}{" "}
+                this project?
+              </DialogContentText>
+              <TextField
+                      autoFocus
+                      margin="dense"
+                      id="password"
+                      label="Password"
+                      type="password"
+                      fullWidth
+                      variant="standard"
+                      onChange={(e) => setPassword(e.target.value)}
+                    />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={handleClose} 
+                      variant="outlined"
+                      color="error">Cancel</Button>
+              <Button onClick={handleConfirm} 
+                      variant="contained"
+                      color="error"
+                      autoFocus>Confirm</Button>
+            </DialogActions>
+          </Dialog>
+          {OpenExportProjectDialog && (
+            <ExportProjectDialog
+              OpenExportProjectDialog={OpenExportProjectDialog}
+              datavalue={getExportProjectButton}
+              datasetId={datasetId}
+              setDatasetId={setDatasetId}
+              projectType={projectType}
+              handleClose={handleClose}
+            />
+          )}
+        </div>
+      </ThemeProvider>
+    );
+  };
+  
+  export default AdvancedOperation;
\ No newline at end of file
diff --git a/src/app/components/Tabs/BasicSettings.jsx b/src/app/components/Tabs/BasicSettings.jsx
index a1e8b8f5..43ce2714 100644
--- a/src/app/components/Tabs/BasicSettings.jsx
+++ b/src/app/components/Tabs/BasicSettings.jsx
@@ -1,4 +1,4 @@
-import { Grid, Typography, TextField,ThemeProvider } from "@mui/material";
+import { Grid, Typography, TextField,ThemeProvider,Autocomplete } from "@mui/material";
 import themeDefault from '../../../themes/theme';
 import OutlinedTextField from "../common/OutlinedTextField";
 import DatasetStyle from "../../../styles/Dataset";
@@ -15,6 +15,7 @@ const BasicSettings = () => {
     });
     const [sourceLanguage, setSourceLanguage] = useState("");
     const [targetLanguage, setTargetLanguage] = useState("");
+    const [languageOptions, setLanguageOptions] = useState("");
     const [loading, setLoading] = useState(false);
     const [newDetails, setNewDetails] = useState();
     const classes = DatasetStyle();
@@ -123,6 +124,55 @@ const BasicSettings = () => {
                     </Grid>
                 </Grid>
 
+                
+
+                <Grid
+                            container
+                            direction='row'
+                            sx={{
+                                alignItems: "center",
+                                // justifyContent: "space-between",
+                                mt: 2
+                            }}
+                        >
+                            <Grid
+                                items
+                                xs={12}
+                                sm={12}
+                                md={12}
+                                lg={2}
+                                xl={2}
+                            >
+                                <Typography variant="body2" fontWeight='700' label="Required">
+                                {"Target Language"}
+                                </Typography>
+                            </Grid>
+                            <Grid
+                                item
+                                xs={12}
+                                md={12}
+                                lg={9}
+                                xl={9}
+                                sm={12}
+                            >
+                                <Autocomplete
+                                    onChange={(e, newVal) => setTargetLanguage(newVal)}
+                                    options={languageOptions}
+                                    value={targetLanguage}
+                                    style={{ fontSize: "14px", width: "500px" }}
+                                    renderInput={(params) => (
+                                        <TextField
+                                            {...params}
+                                            inputProps={{ ...params.inputProps, style: { fontSize: "14px" } }}
+                                            placeholder={"Enter target language"}
+                                        />
+                                    )}
+                                />
+                            </Grid>
+
+                        </Grid>
+
+
 
 
                 <Grid
diff --git a/src/app/components/Tabs/ReadonlyConfigurations.jsx b/src/app/components/Tabs/ReadonlyConfigurations.jsx
new file mode 100644
index 00000000..77998157
--- /dev/null
+++ b/src/app/components/Tabs/ReadonlyConfigurations.jsx
@@ -0,0 +1,241 @@
+import { Card, Grid, ThemeProvider, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import themeDefault from "../../../themes/theme";
+import DatasetStyle from "../../../styles/Dataset";
+import { Link } from "react-router-dom";
+import CustomButton from "../common/Button";
+
+const ReadonlyConfigurations = (props) => {
+  const classes = DatasetStyle();
+
+useEffect(() => {
+    // getWorkspaceDetails();
+}, []);
+
+  return (
+    <ThemeProvider theme={themeDefault}>
+      <Grid
+        container
+        direction="row"
+        // justifyContent='center'
+        // alignItems='center'
+      >
+        {/* <Grid
+                        item
+                        xs={12}
+                        md={12}
+                        lg={12}
+                        xl={12}
+                        sm={12}
+                    >
+                        <Typography variant="h5"   >
+                            Read-only Configurations
+                        </Typography>
+                    </Grid> */}
+        {/*ProjectDetails && ProjectDetails.sampling_mode && */(
+          <div>
+            <Grid
+              item
+              xs={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sm={12}
+              // sx={{mt:2}}
+            >
+              <Typography variant="h6">Sampling Parameters</Typography>
+            </Grid>
+
+            <Grid
+              item
+              xs={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sm={12}
+              sx={{ mt: 2, display: "flex" }}
+            >
+              <Typography
+                variant="subtitle1"
+                style={{ flexDirection: "column" }}
+              >
+                Sampling Mode :
+              </Typography>
+
+              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+                {/*ProjectDetails.sampling_mode == "f" &&*/ "Full"}
+                {/* {ProjectDetails.sampling_mode == "b" && "Batch"}
+                {ProjectDetails.sampling_mode == "r" && "Random"} */}
+              </Typography>
+              
+            </Grid>
+            { /*ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && */ ( 
+            <Grid
+              item
+              xs={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sm={12}
+              sx={{ mt: 2, display: "flex" }}
+            >
+              <Typography
+                variant="subtitle1"
+                style={{ flexDirection: "column" }}
+              >
+                Batch Size  :
+              </Typography>
+
+              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+              {/*ProjectDetails.sampling_parameters_json?.batch_size */ 1}
+              </Typography>
+              
+            </Grid>)}
+            {/*ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && */( 
+            <Grid
+              item
+              xs={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sm={12}
+              sx={{ mt: 2, display: "flex" }}
+            >
+              <Typography
+                variant="subtitle1"
+                style={{ flexDirection: "column" }}
+              >
+                 Batch Number  :
+              </Typography>
+
+              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+              {/*ProjectDetails.sampling_parameters_json?.batch_number*/}
+              </Typography>
+            </Grid>)}
+
+            
+              <Grid
+                item
+                xs={12}
+                md={12}
+                lg={12}
+                xl={12}
+                sm={12}
+                sx={{ mt: 2, display: "flex" }}
+              >
+                <Typography
+                  variant="subtitle1"
+                  style={{ flexDirection: "column" }}
+                >
+                  Dataset Instance :
+                </Typography>
+
+                {/* <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+                  {dataset?.instance_name}
+                </Typography> */}
+                {/* <Link
+                    to={`/datasets/${dataset?.instance_id}`}
+                    style={{ textDecoration: "none" }}
+                    >
+                    <CustomButton
+                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
+                        label="View Dataset"
+                    />
+                </Link> */}
+              </Grid>
+            
+
+             <Grid
+                item
+                xs={12}
+                md={12}
+                lg={12}
+                xl={12}
+                sm={12}
+                sx={{ mt: 2, display: "flex" }}
+              >
+                <Typography
+                  variant="subtitle1"
+                  style={{ flexDirection: "column" }}
+                >
+                  Workspace Name :
+                </Typography>
+
+                {/* <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+                {workspaceDetails.workspace_name}
+                </Typography> */}
+                {/* /*<Link
+                    to={`/workspaces/${ProjectDetails.workspace_id}`}
+                    style={{ textDecoration: "none" }}
+                    >*/
+                    <CustomButton
+                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
+                        label="View Workspace"
+                    />
+                /*</Link>*/}
+
+              </Grid>
+
+            {/*ProjectDetails.filter_string && */(
+              <Grid
+                item
+                xs={12}
+                md={12}
+                lg={12}
+                xl={12}
+                sm={12}
+                sx={{ mt: 2, display: "flex" }}
+              >
+                <Typography
+                  variant="subtitle1"
+                  style={{ flexDirection: "column" }}
+                >
+                  Filter String :
+                </Typography>
+
+                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+                  {/* {ProjectDetails.filter_string} */}
+                </Typography>
+              </Grid>
+            )}
+          </div>
+        )}
+      </Grid>
+
+      <Grid container direction="row">
+        {/*ProjectDetails && ProjectDetails?.variable_parameters?.output_language && */(
+          <div>
+            <Grid item xs={12} md={12} lg={12} xl={12} sm={12} sx={{ mt: 2 }}>
+              <Typography variant="h6">Variable Parameters</Typography>
+            </Grid>
+
+            <Grid
+              item
+              xs={12}
+              md={12}
+              lg={12}
+              xl={12}
+              sm={12}
+              sx={{ mt: 2, display: "flex" }}
+            >
+              <Typography
+                variant="subtitle1"
+                style={{ flexDirection: "column" }}
+              >
+                Output Language :
+              </Typography>
+              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
+                {/* {ProjectDetails?.variable_parameters?.output_language} */}
+              </Typography>
+            </Grid>
+          </div>
+        )}
+      </Grid>
+    </ThemeProvider>
+  );
+};
+
+export default ReadonlyConfigurations;
+
+
+
diff --git a/src/app/components/common/ExportProjectDialog.jsx b/src/app/components/common/ExportProjectDialog.jsx
new file mode 100644
index 00000000..317b75c1
--- /dev/null
+++ b/src/app/components/common/ExportProjectDialog.jsx
@@ -0,0 +1,104 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Grid,
+    Box,
+    Typography,
+    ListItemText,
+    MenuItem,
+    Select,
+    FormControl,
+    InputLabel,
+    Checkbox,
+    ListItemIcon,
+    Chip,
+  } from "@mui/material";
+  import React, { useEffect, useState } from "react";
+  import OutlinedTextField from "../common/OutlinedTextField";
+  import { snakeToTitleCase } from "../../../utils/utils";
+  import DatasetStyle from "../../../styles/Dataset";
+  import CancelIcon from "@mui/icons-material/Cancel";
+
+  
+  const ExportProjectDialog = ({
+    OpenExportProjectDialog,
+    handleClose,
+    datasetId,
+    setDatasetId,
+    datavalue,
+    projectType,
+  }) => {
+    const classes = DatasetStyle();
+    const [instanceIds, setInstanceIds] = useState([]);
+   
+   
+    instanceIds?.map((el) =>
+      console.log(el.instance_id, "instanceIdsinstanceIds")
+    );
+  
+    useEffect(() => {
+    }, []);
+  
+    useEffect(() => {      
+    }, []);
+    return (
+      <Dialog
+        open={OpenExportProjectDialog}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            <Grid
+              container
+              direction="row"
+              sx={{
+                alignItems: "center",
+                // justifyContent: "space-between",
+              }}
+            >
+              <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
+                <FormControl fullWidth size="small">
+                  <InputLabel id="language-label" sx={{ fontSize: "16px" }}>
+                    Dataset Instance Id
+                  </InputLabel>
+                  <Select
+                    labelId="language-label"
+                    id="language-select"
+                    value={datasetId}
+                    label="Dataset Instance Id"
+                    onChange={(e) => setDatasetId(e.target.value)}
+                  >
+                    {instanceIds?.map((el) => (
+                        <MenuItem key={el.instance_id } value={el.instance_id}>
+                          {el.instance_name}
+                        </MenuItem>
+                      ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="text"
+            onClick={handleClose}
+            sx={{ lineHeight: "1", borderRadius: "6px" }}
+          >
+            Close
+          </Button>
+          <Button variant="text" onClick={datavalue} sx={{ borderRadius: "6px" }}>
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+  
+  export default ExportProjectDialog;
\ No newline at end of file
diff --git a/src/app/projects/ProjectLogs.js b/src/app/projects/ProjectLogs.js
new file mode 100644
index 00000000..61b55a63
--- /dev/null
+++ b/src/app/projects/ProjectLogs.js
@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import MUIDataTable from "mui-datatables";
+import { Box, Button,Card, FormControl, Grid, InputLabel, MenuItem, Select, ThemeProvider } from "@mui/material";
+import { addMonths, parse } from 'date-fns/esm';
+import { DateRangePicker } from "react-date-range";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import tableTheme from "../../themes/tableTheme";
+import Spinner from "../components/common/Spinner";
+
+const ProjectLogs = () => {
+  const [taskName, setTaskName] = useState("projects.tasks.export_project_in_place"); 
+  const [columns, setColumns] = useState([]);
+  const [projectLogs, setProjectLogs] = useState([]);
+  const [showPicker, setShowPicker] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [selectRange, setSelectRange] = useState([{
+    startDate: addMonths(new Date(), -3),
+    endDate: new Date(),
+    key: "selection"
+  }]);
+  const [allLogs, setAllLogs] = useState([]);
+
+  const handleRangeChange = (ranges) => {
+    const { selection } = ranges;
+    if (selection.endDate > new Date()) selection.endDate = new Date();
+    setSelectRange([selection]);
+  
+    let tempLogs = [...projectLogs]; 
+    tempLogs = tempLogs.filter((log) => {
+      const date = parse(log.date, 'dd-MM-yyyy', new Date());
+      return date >= selection.startDate && date <= selection.endDate;
+    });
+    setProjectLogs(tempLogs);
+  };
+
+
+  useEffect(() => {
+    if (allLogs.length) {
+      let tempColumns = [];
+      Object.keys(allLogs[0]).forEach((key) => {
+        tempColumns.push({
+          name: key,
+          label: snakeToTitleCase(key),
+          options: {
+            filter: key === 'status',
+            sort: false,
+            align: "center"
+          },
+        });
+      });
+      setColumns(tempColumns);
+      setProjectLogs(allLogs);
+    } else {
+      setColumns([]);
+      setProjectLogs([]);
+    }
+  }, [allLogs]);
+
+  const options = {
+    filterType: 'checkbox',
+    selectableRows: "none",
+    download: false,
+    filter: true,
+    print: false,
+    search: false,
+    viewColumns: true,
+    jumpToPage: true,
+  };
+
+  return (
+    <>
+      <Grid container direction="row" spacing={3} sx={{ marginBottom: "24px" }}>
+        <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>
+          <FormControl fullWidth size="small">
+            <InputLabel id="task-type-filter-label" sx={{fontSize: "16px"}}>Filter by Task Type</InputLabel>
+            <Select
+      labelId="task-type-filter-label"
+      id="task-type-filter"
+      value={taskName}
+      label="Filter by Task Type"
+      onChange={handleTaskChange}
+      sx={{ fontSize: "16px" }}
+    >
+      {[
+        'projects.tasks.add_new_data_items_into_project',
+        'projects.tasks.create_parameters_for_task_creation',
+        'projects.tasks.export_project_in_place',
+        'projects.tasks.pull_new_data_items_into_project',
+        'projects.tasks.export_project_new_record'
+      ].map((el, i) => (
+        <MenuItem key={i} value={el}>
+          {el}
+        </MenuItem>
+      ))}
+    </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} sm={12} md={3} lg={3} xl={3}>
+          <Button 
+            endIcon={showPicker ? <ArrowRightIcon /> : <ArrowDropDownIcon />} 
+            variant="contained" 
+            color="primary" 
+            onClick={() => setShowPicker(!showPicker)}
+          >
+            Pick Dates
+          </Button>
+        </Grid>
+        {showPicker && <Box sx={{mt: 2, display: "flex", justifyContent: "center", width: "100%"}}>
+            <Card>
+              <DateRangePicker
+                onChange={handleRangeChange}
+                showSelectionPreview={true}
+                moveRangeOnFirstSelection={false}
+                ranges={selectRange}
+                maxDate={new Date()}
+                direction="horizontal"
+              />
+            </Card>
+          </Box>}
+      </Grid>
+      {loading ? <Spinner /> : 
+        <ThemeProvider theme={tableTheme}>
+          <MUIDataTable
+            title={""}
+            data={projectLogs}
+            columns={columns}
+            options={options}
+          />
+        </ThemeProvider>
+      }
+    </>
+  );
+};
+
+export default ProjectLogs;
+
+