Fixed Create Project button visibility by role & add loading spinner for workspaces

src/ui/pages/component/Project/createprojectbutton.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Button, Menu, MenuItem, Box } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import configs from "../../../../config/config";
+import Spinner from "../common/Spinner";
+import UserRolesList from '../../../../utils/UserMappedByRole/UserRolesList';
+
+const CreateProjectDropdown = ({ userRole }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [workspaces, setWorkspaces] = useState([]);
+    const open = Boolean(anchorEl);
+    const navigate = useNavigate();
+    const [loadingWorkspaces, setLoadingWorkspaces] = useState(false);
+
+    const mappedUserRole = typeof userRole === "number" ? UserRolesList[userRole] : userRole;
+    if (!["Admin", "OrganizationOwner"].includes(mappedUserRole)) {
+        return null;
+    }
+
+    const handleClick = async (event) => {
+        setAnchorEl(event.currentTarget);
+        setLoadingWorkspaces(true);
+
+        try {
+            // Direct API call instead of GetWorkspaceAPI
+            const res = await fetch(`${configs.BASE_URL_AUTO}/workspaces/`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `JWT ${localStorage.getItem('shoonya_access_token')}`
+                },
+            });
+
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+
+            const data = await res.json();
+            setWorkspaces(data || []);
+        } catch (error) {
+            console.error("❌ Error fetching workspaces", error);
+            setWorkspaces([]);
+        } finally {
+            setLoadingWorkspaces(false);
+        }
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleSelect = (workspace) => {
+        navigate(`/create-annotation-project/${workspace.id}`, {
+            state: { workspace },
+        });
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Button
+                variant="contained"
+                color="primary"
+                onClick={handleClick}
+                sx={{ borderRadius: 2, mb: 2 }}
+            >
+                Create Project
+            </Button>
+
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                { loadingWorkspaces ? (
+                    <MenuItem disabled
+                    sx={{
+                        justifyContent: 'center', p: 1, opacity: 1, "&.Mui-disabled": { opacity: 1, }
+                    }}>
+                        <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%",
+                            }}>
+                                <div style={{all: "unset", transform: "scale(0.4)", }}>
+                                    <Spinner />
+                                </div>
+                        </Box>
+                    </MenuItem>
+                    ) : workspaces.length > 0 ? (
+                        workspaces.map((ws) => (
+                        <MenuItem key={ws.id} onClick={() => handleSelect(ws)}>
+                            {ws.workspace_name}
+                        </MenuItem>
+                    ))
+                ) : (
+                    <MenuItem disabled>No workspaces found</MenuItem>
+                )}
+            </Menu>
+        </>
+    );
+};
+
+export default CreateProjectDropdown;

src/ui/pages/container/Project/ProjectList.jsx

@@ -17,6 +17,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Search from "../../component/common/Search";
 import DatasetStyle from "../../../styles/Dataset";
 import themeDefault from "../../../theme/theme";
+import CreateProjectDropdown from "../../component/Project/createprojectbutton";
 
 export default function ProjectList() {
   const [radiobutton, setRadiobutton] = useState(true);
@@ -34,7 +35,7 @@ export default function ProjectList() {
         }});
   const apiLoading = useSelector((state) => state.apiStatus.loading);
   const projectData = useSelector((state) => state.getProjects.data);
-
+  const loggedInUserData = useSelector((state) => state.fetchLoggedInUserData.data);
   const getDashboardprojectData = () => {
     setLoading(true);
     const projectObj = new GetProjectsAPI(selectedFilters);
@@ -116,6 +117,9 @@ export default function ProjectList() {
                     </FormControl>
                 </Grid>
             </Grid> */}
+            <Grid item sx={{mt:4,mb:1,mr:2,ml:2}}>
+            <CreateProjectDropdown userRole={loggedInUserData?.role || loggedInUserData?.role_id} />
+            </Grid>
         <Grid xs={3} item className={classes.fixedWidthContainer} sx={{mt:1,mb:1,mr:2,ml:2}}>
           <Search />
         </Grid>